在router目录下的index.js文件中，对path属性加上/:id。 

使用router对象的params.id 例如 :  this.$route.params.id

路由的定义，主要有以下几步：

1. 如果是模块化机制，需要调用 Vue.use(VueRouter)

2. 定义路由组件，如：

   const Foo = {
      template: '
   foo
   '};

• 1

• 2

• 3

3. 定义路由（数组）：

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

• 1

• 2

• 3

• 4

• 5

• 6

4. 创建 router 实例

   const router = new VueRouter({
      routes
   });

• 1

• 2

• 3

5. 创建和挂载根实例

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

• 1

• 2

• 3

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

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

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

这时访问，/user/file 会映射到 File 组件

动态路由的创建，主要是使用 path 属性过程中，使用动态路径参数，以冒号开头，如：

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

• 1

• 2

• 3

• 4

这会是访问 user 目录下的所有文件，如 /user/a 和 /user/b，都会映射到 User 组件

当匹配到 /user 下的任意路由时，参数值会被设置到 this.$route.params 下，所以通过这个属性可以获取到动态参数，如：

const User = {
    template: '
User {{ $route.params.id }}
'}

• 1

• 2

• 3

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

    User aaa

可以通过query，param两种方式
区别：query通过url传参，刷新页面还在；params属性页面不在

params的类型：

1. 配置路由格式:/router/:id

2. 传递的方式：在path后面跟上对应的值

3. 传递后形成的路径：/router/123

// 动态路由params在App.vue中用户在index.js {
 path:"/user/:userid",
 component:User,
 }123456789

跳转方式：

// 方法1：按钮// 方法2：
this.$router.push({name:'users',params:{uname:wade}})// 方法3：
this.$router.push('/user/' + wade)1234567

可以通过$route.params.userid 获取你说传递的值

query的类类型

1. 配置路由格式:/router,也就是普通配置

2. 传递的方式:对象中使用query的key作为传递方式

3. 传递后形成的路径:/route?id=123

//01-直接在router-link 标签上以对象的形式档案/*
    02-或者写成按钮以点击事件形式    我的    */
 
 //点击事件
 profileClick(){
   this.$router.push({
        path: "/profile",
        query: {
          name: "kobi",
          age: "28",
          height: 198        }
      });
 }12345678910111213141516171819

跳转方法：

// 方法1：按钮// 方法2：this.$router.push({ name: 'users', query:{ uname:james }})// 方法3：按钮// 方法4：this.$router.push({ path: '/user', query:{ uname:james }})// 方法5：this.$router.push('/user?uname=' + jsmes)1234567891011

可以通过$route.query 获取你所传递的值

var router = new VueRouter({ mode:"history", routes:[{ path:"/home", component:Home },{ path:"/slider/:id", name:"slider", component:Slider }] }); 更多

可以通过query ,param两种方式

区别: query通过url传参，刷新页面还在    params刷新页面不在了
    params的类型:

• 配置路由格式:/router/:id

• 传递的方式:在path后面跟上对应的值

•  传递后形成的路径:/router/123