vue命名路由

场景1：重定向

App.vue

<router-link to="/one"></router-link>
<router-link to="/two"></router-link>
<router-link :to="{name:'one'}"></router-link>
<router-link :to="{name:'two'}"></router-link>

 main.js

import one from '@/components/Route1.vue'
import two from '@/components/Route2.vue'

const router = new VueRouter({
  routes: [
    { path: '/', redirect:'/two' },
    { path: '/', redirect:{name:'two'} },
    { path: '/one',name:'one',  component: one },
    { path: '/two',name:'two', component: two },
  ]
})

场景2：编程式导航实现跳转

App.vue

<router-link to="/one">one</router-link>
<router-link to="/two">two</router-link>
<!-- 出口 -->
<router-view></router-view>

One.vue

<button @click="jump">jump</button>

jump() {
// 暴露了query里面的参数
// this.$router.push({
//     path:'/two',
//     query:{
//         name:'ymm'
//     }
// })

this.$router.push({
    name: "two",
    params: {
    	name: "iii",
    },
});
},

Two.vue

console.log(this.$route.query.name);
console.log(this.$route.params);

main.js

const router = new VueRouter({
  routes: [
    { path: '/one', name: 'one', component: one },
    { path: '/two', name: 'two', component: two },
  ]
})