Vue Router导航使用总结

Vue Router导航使用总结

路由配置要求（router.js）

1. path属性必须有，否则会编译报错
2. path属性如非有特殊需求，应采用相对路径
3. name属性根据需要即可，不做限制

导航及参数传递（router.push()）

1. 调用方式

[1] 在js文件中的使用方式

首先在main.js中，将router放入全局

Vue.global.VueRoot = new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

然后在需要使用router的js文件里使用方式如下

import Vue from 'vue';
let Router = Vue.global.Router;
Router.push()

[2] 在vue组件或页面中的使用方式

this.$router.push()

2.使用场景

说明

为方便表述，本节中所有router.push()仅表示调用此方法，具体调用方式，请自行根据实际情况，替换为前一节《调用方式》中的代码
假定其router配置为

{
    path: "/home/index",
    name:"HomeIndex"
},

无参数导航

//直接使用字符串做参数，仅支持path，不支持name
router.push("/home/index")

//使用对象做参数，可根据对象属性，既支持name也支持path
router.push({name:"HomeIndex"})
router.push({path:"/home/index"})

//使用对象做参数，同时有name和path属性时，name优先级高于path
router.push({name:"HomeIndex"，path:"/home/index"})

有参数导航

直接使用字符串做参数，仅支持path，不支持name

//在目标页面可用this.$route.query去到对象{ID:"123",Name:"aaa"}
router.push("/home/index?ID=123&Name=aaa")
//当路由配置为/home/index/:ID/:Name时，在目标页面可用this.$route.params去到对象{ID:"123",Name:"aaa"}
router.push("/home/index/123/aaa")

使用对象做参数

//使用path属性时，仅支持query方式，params方式会被忽略
router.push({path:"/home/index",query:{ID:"123",Name:"aaa"}})//在目标页面可用this.$route.query取到对象{ID:"123",Name:"aaa"}
router.push({path:"/home/index",params:{ID:"123",Name:"aaa"}})//在目标也取不到任何参数

//使用name属性时，同时支持query方式和params方式
router.push({name:"HomeIndex",query:{ID:"123",Name:"aaa"}})//在目标页面可用this.$route.query取到对象{ID:"123",Name:"aaa"}
router.push({name:"HomeIndex",params:{ID:"123",Name:"aaa"}})//在目标页面可用this.$route.params取到对象{ID:"123",Name:"aaa"}
router.push({name:"HomeIndex",query:{ID:"123",Name:"aaa"},params:{ID:"456",Name:"bbb"}})//在目标页面可用可用this.$route.query取到对象{ID:"123",Name:"aaa"},this.$route.params取到对象{ID:"456",Name:"bbb"}

query和params的区别

1.query会将参数添加在导航Url中，即下面两种方式产生的效果一致

router.push("/home/index?ID=123&Name=aaa")
router.push({name:"HomeIndex",query:{ID:"123",Name:"aaa"}})

页面刷新，参数值不会丢失。

2.params

(1) 若router配置path时，没有加入，仅配置了path的值，类似如下代码

{
    path: "/home/index",
    name:"HomeIndex"
},

则params不会将参数添加到导航Url中

页面刷新，会导致参数值的丢失。

(2) 若router配置path时，加入“动态路径参数”(dynamic segment)，类似如下代码

{
    path: "/home/index/:ID/:Name",
    name:"HomeIndex"
},

则params会将参数添加到导航Url中，即下面两种方式产生的效果一致

router.push("/home/index/123/aaa")
router.push({name:"HomeIndex",params:{ID:"123",Name:"aaa"}})

页面刷新，参数值不会丢失。

注意，此种方式，会导致导航时必须与要求的参数数量一致，否则会无法匹配到路由。若希望某些参数可以为空，则需要在router配置时，在对应参数后加？标记例如

{
    path: "/home/index/:ID?/:Name",
    name:"HomeIndex"
},

(3) 若router配置path时，加入“动态路径参数”(dynamic segment),且将props配置为true，类似如下代码

{
    path: "/home/index/:ID/:Name",
    name:"HomeIndex",
    props: true,
},

则，此时，可以在目标页面的props中可以直接获取参数值。

props: {
    ID: { type: String },
    Name: { type: String },
},

3.参考资料

• [1] 编程式的导航
• [2] 动态路由匹配