vue-router入门随笔

 1 js
 2 // 引入vue
 3 // 引入vue-router，  假如是模块化编程，需要Vue.use(VueRouter)来使用插件
 4 
 5 // 1、引入组件，定义也可
 6 import Bar from ‘./Bar‘
 7 
 8 
 9 
10 
11 // 2、定义路由
12 const routes = [
13     {path: ‘/bar‘, component:Bar}
14 ]
15 
16 // 3、创建一个router实例，然后传入routes
17 
18 const router = new VueRouter({
19     router
20 })
21 
22 // 4、创建跟实例并挂载
23 cosnt app = new Vue({
24     router
25 }).$mount(‘#app‘)

 1 <div class="app">
 2   <p>
 3     <!-- 使用 router-link 组件来导航. -->
 4     <!-- 通过传入 `to` 属性指定链接. -->
 5     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 6     <router-link to="/bar">Go to Bar</router-link>
 7   </p>
 8   <!-- 路由出口 -->
 9   <!-- 路由匹配到的组件将渲染在这里 -->
10   <router-view></router-view>
11 </div>

 1 const City = {
 2     template:  ‘<div>城市名字： {{$route.params.cityname}}</div>‘
 3 }
 4 
 5 const router = new VueRouter({
 6     routes: [
 7         // 动态路由的参数，由冒号开头表示
 8         { path: ‘/city/:cityname‘， component: City}
 9     ]
10 })
11 
12 // 这样，当路由访问到/city/广州，这样模板中，就会渲染出城市的名字，所以可以用$route.params来获取动态参数。

 1 {
 2     // 这样会匹配所有的路径
 3     path: ‘*‘
 4 }
 5 
 6 // 通配符的位置需要放置路由的最后。
 7 // 这里因为路由匹配的规则是根据路由定义的先后来跳转的
 8 
 9 // 所以下面这种是错误的，会一直匹配到*
10 cosnt error = {
11     template: ‘<div>嘿，这里不是你该来的</div>‘
12 }
13 
14 const routes = [
15     {
16         path： ‘*’，
17         component: error
18     },
19     {
20         // 正常路由
21         path: ‘/city‘,
22         component: xxx
23     }
24 ]
25     

 1 // 这样就正常了
 2 const routes = [
 3      {
 4         // 正常路由
 5         path: ‘/city‘,
 6         component: xxx
 7     },   
 8     {
 9         path： ‘*’，
10         component: error
11     }
12 ]

1 // 如果按照上诉的路由
2 this.$router.push(/cityname)  // 由于没有该路由，所以匹配通配符
3 this.$route.params.pathMatch // ’cityname‘

 1 const router = new VueRouter({
 2     routes: [
 3         { path: /city/:id, component: City,
 4            children: [{
 5                 // 当路由进入 /city/:id/post  匹配成功
 6                 // 注意这里不能写/post，这样会直接匹配到根路由，也就失去了嵌套路由的意义
 7                 path: ‘post‘，
 8                 component；CityPost
 9             }]
10         }         
11     ]
12 })
13 
14 // 嵌套路由使用children作为子级的路由，这样可以嵌套多层路由，子子孙孙孙孙孙无穷尽

 1 // 字符串
 2 router.push(’city‘)
 3 
 4 // 对象
 5 router.push({path: ‘ciry‘})
 6 
 7 // 命名路由, 相当于给路由定义一个名字，需要在路由那边使用name来定义
 8 router.push({name: ‘user‘, params: {userId: ‘123‘}})
 9 // 这里为什么使用path呢，由于使用path的话，params会被忽略掉，因为参数本来就是路径的一部分，所以要写满带参数的路径
10 // 如：
11 router.push({ path: `/user/${userId}` }) 
12 
13 
14 
15 // 带查询参数，变成 /register?plan=private
16 router.push({ path: ‘register‘, query: { plan: ‘private‘ }})

 1 // 上诉代码块中，使用名字，是需要像下面这样使用name来定义就可
 2 const router = new VueRouter({
 3   routes: [
 4     {
 5       path: ‘/user/:userId‘,
 6       name: ‘user‘,
 7       component: User
 8     }
 9   ]
10 })

 1 const router = new VueRouter({
 2   routes: [
 3     {
 4       path: ‘/‘,
 5       components: {
 6         default: Foo,
 7         a: Bar,
 8         b: Baz
 9       }
10     }
11   ]
12 })