vue router 入门笔记

tips：

components优先级大于component，即当一个route对象里同时配置了component和components时component视为无效

即使route对象有name属性，也要配置一个path属性。name属性只是配对用的，path是要直接打到url上的。

router-link的to属性会和首先匹配的route对象匹配，即to属性和多个route对象匹配时，使用先定义的route对象。

to属性和path去配对，name属性和name属性配对。因为每个link只有一个to属性，所以不存在一个link既有path又有name的情况。

router-link（路由到不同配置）

根据to属性的path值或name值，来匹配routes数组中唯一一个route对象（若匹配到多个则使用先匹配的）。以根据不同route对象来渲染页面。

const routes = [{    path: '/path1',    component: {        template: '
    
     foo
    
'    }},{    path: '/path2',    component: {        template: '
    
     bar
    
'    }}]

route对象（配置路由走向）

用来定义不同路由下，一个或多个router-view渲染哪个组件。以及可以通过children属性配置嵌套的路由的route对象。

一个view：

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

多个view：

{  path: '/',  components: {    default: Foo, // 没有name属性的view用Foo组件    a: Bar, // name值为a的view用Bar组件    b: Baz // name值为b的view用Baz组件  }}

嵌套的view：

{    path: '/user/:id',    component: User,    children: [ 相当于在children属性上再配置一个routes数组    {        // 当 /user/:id/profile 匹配成功，        // UserProfile 会被渲染在 User 的 
    
      中        path: 'profile',        component: UserProfile    },    {        // 当 /user/:id/posts 匹配成功        // UserPosts 会被渲染在 User 的 
     
       中        path: 'posts',        component: UserPosts    }]}

多个路由匹配一个route对象并把路由信息传入组件


    
     Go to Foo
    
    
     Go to Bar

const router = new VueRouter({  routes: [    // 动态路径参数 以冒号开头    { path: '/user/:id',      component: {        template: '
    
     User {
   { $route.params.id }}
    
'      }     }  ]})