1 <router-link
2 :to="{
3 path: 'yourPath',
4 params: {
5 id: id,
6 dataObj: data
7 },
8 query: {
9 id: id,
10 dataObj: data
11 }
12 }">
13 </router-link>
path -> 是要跳转的路由路径(推荐换成 name 值,name: pathName ,命名路由,两者都可以进行路由导航)
params -> 是要传送的参数,参数可以直接 key:value 形式传递(类似post)
query -> 是通过 url 来传递参数的同样是 key:value 形式传递(类似get)
接收参数:
this.$route.query.id
this.$route.params.id
关于path路径加不加 / 的问题,加了/就是在根路径下跳转,不加就是在当前路径后面跳转,子页面,使用命名路由就不用管加不加 / 的问题了
1 watch:{
2 //监听相同路由下参数变化的时候,从而实现异步刷新
3 '$route'(to,from){
4 //做一些路由变化的响应
5 this.loading = true;//打开加载动画
6 this.getCateShop();//重新获取数据
7 },
8 },
1 //在进入路由之前, 每一次都会执行此方法 全局钩子
2 router.beforeEach(function(to,from,next){
3 //设置网页标题
4 document.title = to.meta.title;
5 //检查是否已登录
6 let userObj = JSON.parse(sessionStorage.getItem('user'));
7 if(userObj){
8 //执行方法,将用户名设置进全局参数 vuex
9 //提交mutation的Types.SETUSERNAME方法
10 //第二个参数是携带的参数
11 //main.js使用vuex的提交方法,不需要this.$store.commit(),直接就store.commit()
12 store.commit(Types.SETUSERNAME,userObj.username);
13 }else{
14 //如果未登录,想要进入admin目录,则自动跳回首页
15 if(to.path.indexOf('admin') != -1){
16 // alert("进了");
17 router.push({name:'home'});
18 }
19 }
20 next(); //继续往下走
21 });