Vue Router关键点总结

嵌套子路由需要注意点

{
    path: '/',
    redirect: '/home'
},
{
    path: '/home',
    name: 'home',
    component: home
},
{
    path: '/list',
    component: list,
    //嵌套路由
    children: [
         // 在嵌套子路由中，path不应当用 /login，而是应当用 login，如果用了 /login 那么路由就会变             // 成 /login 而不是我们想要的 /list/login
         {
             path: 'login',
             name: 'login',
             component: login
         },
         // 当路径为/list时，重定向到/list/login路径
         {
             path: '/list',
             name: 'list',
             redirect: '/list/login'
         }
    ]
}

为何有时要加Name

{
    path: '/home',
    name: 'home',
    component: home
},
// 如果没有name='home',那么我们只能通过path方式来跳转
<router-link :to="{path: '/home'}"></router-link>

// 如上代码片段中有一个那么：'home'，那么我们为什么有时候要加上这个呢，其实是为了跳转提供方便
// 如果有了name='home',那么就可以通过如下方式来跳转
<router-link :to="{name: 'home'}"></router-link>

路由导航你所需知道的

// 这里的路由规则在上面呦！！！
// /home
this.$router.push({path:'/home'}) === this.$router.push('/home') OK
// /list/login?username=Maka&password=123456
this.$router.push({path: 'login', query: {username: 'Maka', password:'123456'}}) OK

const username='Maka'
const password='123456'
// /home
this.$router.push({name:'home'}) OK
// /list/login/Maka/123456  下面两条是等价的
this.$router.push({name: 'login', params:{username, password}}) OK
this.$router.push({path: `/list/login/${username}/${password}`})    OK

// 反例,在这个例子中你是否认为他会跳转到/login/Maka/123456呢？其实他是不能的，如果path和params搭配
// 那么params中的参数会被直接忽略掉，所以在这里你要始终记住path和query搭配；name和params搭配
this.$router.push({path:'/login', params: {username, password}}) NO

组件与Vue Router解耦

1.布尔模式解耦

// 组件
const third = {
    props: ['id'],
    template: `<h3>页面内容----{{id}}</h3>`
}

// 路由
{
    path: '/third/:id',
    name: 'third',
    component: third,
    // 一定要加上下面这句话third组件才能取到 :id
    props: true
},

2.对象模式解耦

// 组件
const third = {
    props: ['name'],
    template: `<h3>页面内容----{{name}}</h3>`
}

// 路由
{
    path: '/third/:name',
    name: 'third',
    component: third,
    props: {
        name: 'Maka'
    }
},
    
// 完后你可以启动项目，在url栏中键入 /third/123455 或者 /third，你会发现即使你加了name属性third模板也会
// 渲染出Maka而不是123456，因为你在路由中给他设定了具体值！！

3.函数模式解耦

通过上面两种模式解耦你会发现第一个方式只能实现基于param方式进行传参的解耦；第二种props中的值是死的，所以函数模式解耦诞生了！

// 组件
const third = {
    props: ['id'],
    template: `<h3>页面内容----{{id}}---{{name}}</h3>`
}

// 路由
{
    path: '/third',
    name: 'third',
    component: third,
    props: (route) => {
        id: route.query.id,
        name: route.query.name
    }
},
    
// 完后你可以启动项目，在url栏中键入 /third?id=123&name=Maka你就可以看到结果了

最后编辑于：2020.06.03 09:19:39