vue-router的基本使用步骤（全）_yarn add vue-router -s

vue-router的基本使用步骤（全）

• vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？
  • hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
  • history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】
  • abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

1. 安装 vue-router       yarn add vue-router -S
2. 在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块
3. 引入第三方的依赖包, 并注册路由

import Vue from 'vue'//引入vue
import VueRouter from 'vue-router'//引入vue-router路由模块
Vue.use( VueRouter ) //使用vue-router这个第三方插件
1
2
3

注意： import这个关键字要放在整个js文件的上层，也就是只能紧贴着javascript标签下面写，js文件就写顶部
4. 创建了一个router对象实例，并且创建路由表

const routes = [//路由表
    {
        path: '/home',
        component: Home
        }//每一个对象就是一个路由
    ]
const router = new VueRouter({
    routes//路由表 必写的
    mode:''//有三个选项，默认是hash，还有history,abstract，上面有讲述
})
1
2
3
4
5
6
7
8
9
10

5. 导出router实例，使用export default导出，只能导出一个
   export default router
6. 入口文件main.js中引入路由实例 router , 然后在根实例中注册

import router from './router/index.js'//引入这个router文件，默认会打开index.js，所以index.js可以省略不写
new Vue({
    router,//在这里使用一下router
    render: (h) => h(App)
}).$mount('#app')
1
2
3
4
5

7. 给路由一个路由展示区域

• 如果是以及路由， 那么我们放在App组件中,用一个 router-view 的组件表示

<router-view></router-view>
1

8. 当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上

const routes = [
    { //我们要求这个路由的配置要放在路由表的最上方
        path: '/',
        redirect: '/home'//redirect表示重定向，后面跟的是要去的路径
    }
]
1
2
3
4
5
6

9. 错误路由匹配，

const routes = [
    {
        path: '/',
        redirect: '/home' //重定向
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/list',
        component: List
    },
    {
        path: '/detail',
        component: Detail
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/register',
        component: Register
    },
    {
        path: '/user',
        component: User
    },
    {
        path: '/shopcar',
        component: Shopcar
    },
    {
        path: '/error',
        component: Error
    },
    { //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个
        path: '**',
        redirect: '/error'//如果路径出错，就跳到你写好的错误路由页面
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

10. vue路由模式的确定 mode

• 如果你使用的是 hash , 那么a标签就可以了、
• 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件

• router-link 这个组件 身上必须要有一个 to 属性

>bottostarp选项卡案例
<template>
    <div id="app">
        <div class="container">
            <div class="row">
                <nav class="nav nav-tabs nav-stacked">
                <router-link class="nav-link" to = "/user"> user </router-link><!--把a标签改成 router-link , href 改成 to，to的值等于你index.js中注册的路由叫什么，注意小写-->
                <router-link class="nav-link" to = "/shopcar"> shopcar </router-link>
                <router-link class="nav-link" to = "/list"> list </router-link>
                <router-link class="nav-link" to = "/Home"> Home </router-link>
                <router-link class="nav-link" to = "/login"> login </router-link>
                </nav>
            </div>
            <div class="row">
                <!-- 路由的展示区域 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

11. 二级路由

const routes = [
    {
        path: '/shopcar',
        component: Shopcar,
        children: [
                {
                    path: 'yyb', //不写 /
                    component: Yyb
                }
            ]
    }
]
1
2
3
4
5
6
7
8
9
10
11
12

• 注意： 写好配置之后，不要忘记了， 在对应的一级路由的组件中书写 路由展示区域

12. 命名路由

作用： 就是简写路径了

{
path: '/shopcar',
component: Shopcar,
//子路由
children: [
    {
        path: 'yyb', // 容易犯错点，二级路由不带  /  反斜杠
        component: Yyb,
        name: 'yyb' //命名路由
    },
    {
        path: 'junge',
        component: Junge
    }
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 使用：

<router-link :to = "{name:'yyb'}"/>//记得 to 前面要带 ： 单向数据绑定，后面是一个对象name='你命名的路由名字'
1

13.命名视图

给出了一级视图以外的其他视图起名字， 这样可以区分不同级别的路由使用不同级别的视图

//这是一个路由表中的一个路由
{
path: '/Home', //路径，路径不能大写，不推荐大写
component: Home,//组件，名称要和你引入时import的名字一样
children:[//二级路由
        {
            path:'zy',//切记 二级路由 的路径不能带反斜杠 /
            component:Zy
        },
        {
            path:'aa',
            component:{//命名视图就是把component写成一个对象的形式，键是视图名字，值是路由的名i在，就是上面引入进来的那个名字
                zhangyue:Aa
            },
            name:'aa'//命名路由，当路由有很多级时，书写太麻烦，就需要一个名字，写路径时，直接写这个名字就可以
        },
    ]
},

//使用就直接在标签里加上name就可以<router-view name = "zhangyue"></router-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20