Vue Router

1、安装vue-router

npm i vue-router@3
1

说明：不指定版本默认安装最新版，Vue2X使用vue-router@3，Vue3X使用vue-router@4。

2、引入并应用router

2.1 配置路由

一般在src目录下建立一个router文件夹加入index.js文件

//配置整个应用的路由器
import VueRouter from "vue-router";
import ReportA from "../views/ReportA";
import ReportB from "../views/ReportB";

//创建并暴露路由器
export default new VueRouter({
    routes:[
        {
            path:'/reportA',
            component: ReportA
        },
        {
            path:'/reportB',
            component: ReportB
        }
    ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.2 在应用入口main.js引入并应用router

//引入VueRouter
import VueRouter from 'vue-router'
//引入配置的路由器, index.js可以不写，全路径写法 ./router/index.js
import router from './router'

new Vue({
  render: h => h(App),
  //全写形式：router: router
  router
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10

2.3 使用路由

• router-link 实现路由切换

<!-- to代表路由到达位置 -->
<router-link to="/reportA">ReportA</router-link>
<router-link to="/reportB">ReportB</router-link>
1
2
3

• router-view 实现展示路由的页面

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

3 细节配置使用

3.1 路由的query参数

	<!-- 参数写法 -->
    <!-- <router-link to="/reportB/reportC?a=1&b=2">ReportC</router-link> -->
    
    <!-- 对象写法 -->
    <router-link :to="{
        path:'/reportB/reportC',
        query:{
            a:1,
            b:2
        }
    }">ReportC</router-link>
    
	<!-- 接收参数 -->
	$route.query.a
	$route.query.b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.2 路由命名

export default new VueRouter({
    routes:[
        {
	        name:'reportA',
            path:'/reportA',
            component: ReportA
        },
        {
	        name:'reportB',
            path:'/reportB',
            component: ReportB
        }
    ]
});

<!-- 使用路由name -->
<router-link :to="{name:'reportA'}">ReportC</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.3 路由的params参数

3.3.1 配置路由，申明params参数

export default new VueRouter({
    routes:[
        {
            path:'/componentA',
            component: ComponentA
        },
        {
            path:'/componentB',
            component: ComponentB
        },
        {
            path:'/reportA',
            component: ReportA
        },
        {
            path:'/reportB',
            component: ReportB,
            children:[
                {
                    name: 'reportC',
                    path:'reportC',
                    component: ReportC
                },
                {
                    name:'reportD',
                    //使用占用符声明接收params参数
                    path:'reportD/:a/:b',
                    component: ReportD
                }
            ]
        }
    ]
});
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

3.3.2 接收params参数

	<!-- params 参数写法 -->
    <!-- <router-link to="/reportB/reportD/1/2">ReportD</router-link> -->

    <!-- params 对象写法，只允许使用路由name，不允许使用path -->
    <router-link
      :to="{
        name: 'reportD',
        params: {
          a: 1,
          b: 2,
        },
      }"
      >ReportD</router-link
    >
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.4 路由的props参数

	//1. router中 props对象写法
	{
        name:'reportD',
        //使用占用符声明接收params参数
        path:'reportD',
        component: ReportD,
        //props对象写法，对象中key-value会以props的形式传给路由指向的组件
        props:{
            a:1,
            b:2
        }
    }
    
	//2. props布尔值写法
	{
        name:'reportD',
        //使用占用符声明接收params参数
        path:'reportD/:a/:b',
        component: ReportD,
        //props布尔值写法，会将路由中的所有params参数以props的形式传给路由指向的组件
        props: true
    }
    
	//3. props函数写法
	{
        name:'reportD',
        //使用占用符声明接收params参数
        path:'reportD/:a/:b',
        component: ReportD,
        //props布尔值写法，会将路由中的所有params参数以props的形式传给路由指向的组件
        props(router){
            return{
                a:router.query.a,
                b:router.query.b
            }
        }
    }
    
	//props 对象接收
   	export default {
	  name: "reportD",
	  //props对象接收
	  props:['a','b'],
	};
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
43
44

3.5 路由的replace属性

//浏览器的历史记录有两种方式：push 和 replace，
//默认为push模式，push模式会在浏览器中留有历史记录，replace会替换当前的记录.
<router-link to="/reportB/reportD" replace>ReportD</router-link>
1
2
3

3.6 编程式路由导航

	this.$router.push({
		name:'',
		params:{
			a:1,
			b:2
		}
	})

	this.$router.replace({
		name:'',
		params:{
			a:1,
			b:2
		}
	})

    this.$router.forward()
    this.$router.back()
    this.$router.go()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.7 缓存路由组件

  //切换路由时，保持组件挂载，不被销毁
  <keep-alive include="组件名">
  	  <router-view></router-view>
  </keep-alive>
1
2
3
4