Vue-Router基础

Vue Router

官方的路由管理器,让构建单页面应用变得易如反掌。

• 传统方式
  • 通过切换url,来切换到不同文件
• SPA
  • 通过监听URL变化,定位到同一文件的不同组件
  • 类型
    • Hash模式 (不美观/无法定位锚点)
    • History模式(需要后端配合/IE9不兼容(使用强制刷新处理))

安装

1. npm install vue-router
2. import VueRouter from 'vue-router'
3. Vue.use(VueRouter)

路由使用方式

• 声明式导航

<!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <router-link to="/foo">Go to Foo</router-link>

  <!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

• 编程式导航
  • push(location, onComplete?, onAbort?)
    • 这个方法会向 history 栈添加一个新的记录
  • replace(location, onComplete?, onAbort?)
    • 替换掉当前的 history 记录。
  • .go(n)
    • 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步

// onComplete 回调将会在导航成功完成
// onAbort 终止时调用

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效(如果提供了 path，params 会被忽略)
router.push({ path: '/user', params: { userId }}) // -> /user

定义路由

//路由组件 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
//定义路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  //命名的路由
  { path: '/user/:userId', name: 'user', component: User }
]
//创建 router 实例
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
//挂载到根实例
const app = new Vue({
  //我们可以在任何组件内通过 this.$router 访问路由器，
  //也可以通过 this.$route 访问当前路由：
  router
}).$mount('#app')

//this.$route.params.username
//this.$router.go(-1)
//this.$router.push('/')

动态路由匹配

//当匹配到一个路由时，参数值会被设置到 this.$route.params
//this.$route.params.id
{ path: '/user/:id', component: User }
// 会匹配所有路径
{ path: '*' }
// 会匹配以 `/user-` 开头的任意路径
{ path: '/user-*' }
//pathMatch 它包含了 URL 通过通配符被匹配的部分
// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

如果使用动态路由匹配需要注意

//从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用。

//想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
watch: {
 '$route' (to, from) {
   // 对路由变化作出响应...
 }
}
//或者使用这个
beforeRouteUpdate (to, from, next) {
 // react to route changes...
 // don't forget to call next()
}

嵌套路由

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [{
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          //要注意，以 / 开头的嵌套路径会被当作根路径。
          path: 'profile',
          component: UserProfile
        }]
    }
  ]
})

命名视图

<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>

routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]

重定向&别名

routes: [
    //redirect 重定向
    { path: '/a', redirect: '/b' }
    { path: '/a', redirect: { name: 'foo' }}
    //alias 起别名
    { path: '/a', component: A, alias: '/b' }
  ]

使用 props 将组件和路由解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})