vue-router 定义路由、嵌套路由

最新推荐文章于 2024-08-02 17:01:38 发布

红孩儿2011

最新推荐文章于 2024-08-02 17:01:38 发布

阅读量646

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_26642611/article/details/103627513

版权

vue-router 中定义动态路由、嵌套路由，并动态获取参数
路由的定义，主要有以下几步：
1、如果是模块化机制，需要调用 Vue.use(VueRouter)
2、定义路由组件，如：

const Foo = {
   template: '<div>foo</div>'
};

3、定义路由（数组）：

const routes = [
   {
       path: '/foo',
       component: Foo
   }
];

4、创建 router 实例

const router = new VueRouter({
   routes
});

5、创建和挂载根实例

const app = new Vue({
   routes
}).mount('#app');

嵌套路由主要是通过 children，它同样是一个数组：

{
    path: '/user',
    component: User,
    children: [
        {
            path: 'file',
            component: File
        }
    ]
}

这时访问，/user/file 会映射到 File 组件
动态路由的创建，主要是使用 path 属性过程中，使用动态路径参数，以冒号开头，如：

{
    path: /user/:id
    component: User
}

这会是访问 user 目录下的所有文件，如 /user/a 和 /user/b，都会映射到 User 组件
当匹配到 /user 下的任意路由时，参数值会被设置到 this.$route.params 下，所以通过这个属性可以获取到动态参数，如：

const User = {
    template: '<div>User {{ $route.params.id }}</div>'
}

这里会根据访问的路径动态的呈现，如访问 /user/aaa 会渲染：

<div>
    User aaa
</div>

关注