首先,vue-router是vuejs的路由管理器,它让我们构建单页面应用更加方便;
下载就是npm install vue-router --save-dev(npm包管理器)
引入则是在入口文件main.js中引入
路由设置的具体地方是在src文件下的router文件夹,里面新建一个js文件,然后引入vue和vue-router
routes就是具体设置路由的地方,首先得引入你想要跳转路由的.vue文件,然后才能在routes里面设置路由,path为'/'的是默认路由,项目打开时候默认显示的视图
而路由跳转是以来router-view标签来跳转的,意思就是说路由跳转的页面会替代router-view标签,所以一般App.vue
文件一般是外面一层div之后只有一个router-view标签来显示路由视图
那如果要在其他页面设置路由怎办呢???
那就要用到子路由(嵌套路由)了
首先,在你需要设置子路由的页面并且要变化视图的地方写一个router-view标签,然后在router文件夹下设置路由的js文件中的引入要设置子路由的vue文件,在对应路由的地方写子路由,也就是嵌套路由,比如:
push的用法
replace和push的用法一样,区别就在于push回往history添加记录二replace不会向history中添加记录(可以避免页面在两个路由之间来回跳转)
go的用法和js中一样,this.$router.go(参数),这个参数就是数字,负数就是回退,正数就是前进,但是前提是history记录中存在记录
如果参数是-1的话,相当于this.$router.back();
嵌套路由的跳转只能在父级路由之中跳转,在其他路由之中无法实现跳转
传值方式有两种
方法一: query传值
路由跳转的方式为
this.$router.push({ path: path, query: { mId: value } });
接受数据的方式是:this.$route.query+键名
方法二:params传值
路由跳转的方式为
this.$router.push({ name:'hello', params:{ name:'word', age:'11' } })
接收数据的方式是:this.$route.params+键名
但是需要注意的是
1、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。 2、params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。