Vue实战之Vue中路由 (Vue Router)

原创

已于 2023-02-28 06:18:08 修改 · 932 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-08-05 13:13:45 首次发布

文章目录

Vue 实战
- 十二、Vue中路由（Vue Router）

Vue 实战

十二、Vue中路由（Vue Router）

Vue Router 是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

1、路由

路由：根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

通俗定义：通过使用Vue Router 可以将现有Vue开发变得更加灵活，它可以根据前端请求url对应在页面中展示不同组件。

2、作用

用来在Vue中实现组件之间的动态切换

3、使用路由

（1）引入路由

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

（2）创建组件对象

//1.声明组件模板对象
const login = {
   
   
    template: `<div><h2>用户登录</h2></div>`,
}

const register = {
   
   
    template: `<div><h2>用户注册</h2></div>`,
}

（3）定义路由对象的规则

//2.定义路由对象的规则
//创建路由对象
const router = new VueRouter({
   
   
    routes: [
        {
   
   path: '/login', component: login},//path：路由的路径 component：路径对应的组件
        {
   
   path: '/register', component: register},
    ]
});

（4）将路由对象注册到Vue实例中

//3.将路由对象注册到Vue实例中
const app = new Vue({
   
   
    el: "#app",
    data: {
   
   
        msg: "Vue router 基本使用"
    },
    methods: {
   
   },
    router: router,//设置路由对象
})

（5）在页面中显示路由的组件

<!--显示路由的组件-->
<router-view></router-view>

（6）根据链接切换路由

<!--根据链接切换路由-->
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

（7）默认路由

作用：用来在第一次进入界面时显示一个默认的组件

//创建路由规则对象
const router = new VueRouter({
   
   
    routes: [ //配置路由规则  //redirect: 路由重定向
        {
   
   path: '/', redirect: '/login'},//redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示  推荐使用
        {
   
   path: '/login', component: login},
        {
   
   path: '/reg', component: reg},
        {
   
   path: '*', component: notFound},//这个路由必须要放在路由规则最后后面
    ]
});

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{
  
  {msg}}</h1>

    <!--4.显示路由的组件-->
    <router-view></router-view>

    <!--5.根据链接切换路由-->
    <a href="#/login">点我登录</a>
    <a href="#/register">点我注册</a>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //1.声明组件模板对象
    const login = {
     
     
        template: `<div><h2>用户登录</h2></div>`,
    }

    const register = {
     
     
        template: `<div><h2>用户注册</h2></div>`,
    }

    //2.定义路由对象的规则
    //创建路由对象
    const router = new VueRouter({
     
     
        routes: [
            {
     
     path: '/login', component: login},//path：路由的路径 component：路径对应的组件
            {
     
     path: '/register', component: register},
        ]
    });

    //3.将路由对象注册到Vue实例中
    const app = new Vue({
     
     
        el: "#app",
        data: {
     
     
            msg: "Vue router 基本使用"
        },
        methods: {
     
     },
        router: router,//设置路由对象
    })
</script>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{
  
  {msg}}</h1>

    <a href="#/login">用户登录</a>
    <a href="#/reg">用户注册</a>
    <!--显示路由组件标签-->
    <router-view></router-view>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //登录组件
    const login = {
     
     
        template: `<div><h3>用户登录</h3></div>`
    };
    //注册组件
    const reg = {
     
     
        template: `<div><h3>用户注册</h3></div>`
    };
    //404组件
    const notFound = {
     
     
        template: `<div><h3>404 Not Found!,当前页面走丢了!!!!</h3></div>`
    };

    //1.创建路由规则对象
    const router = new VueRouter({
     
     
        routes: [ //配置路由规则  //redirect: 路由重定向
            {
     
     path: '/', redirect: '/login'},
            {
     
     path: '/login', component: login},
            {
     
     path: '/reg', component: reg},
            {
     
     path: '*', component: notFound},//这个路由必须要放在路由规则最后后面
        ]
    });

    const app = new Vue({
     
     
        el: "#app",
        data: {
     
     
            msg: "vue router 基本使用"
        },
        methods: {
     
     },
        router,//注册路由
    });
</script>