vue router 入门笔记

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: '<div>foo</div>'
    }
},{
    path: '/path2',
    component: {
        template: '<div>bar</div>'
    }
}]

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 的 <router-view> 中
        path: 'profile',
        component: UserProfile
    },
    {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 会被渲染在 User 的 <router-view> 中
        path: 'posts',
        component: UserPosts
    }]
}

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

<router-link to="/user/001">Go to Foo</router-link>
<router-link to="/user/002">Go to Bar</router-link>

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

router-view（路由接收者）

根据匹配的route对象，按照component对象定义的view与组件的匹配关系渲染组件。

一个view：

<router-view></router-view>

多个view：
指一个route对线同时控制多个视图。
其中的class会渲染在组件的根元素上。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>s