Vue Router （一）基础篇

简介

使用 Vue.js ，可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

安装

npm install vue-router

 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 1. 定义、引用（路由）组件。 
const Foo = { template: '<div>foo</div>' }
import Bar from '@/views/bar.vue' 

// 2. 定义路由 
const routes = [
 { path: '/foo', name: 'foo', component: Foo }, 
 { path: '/bar', name: 'bar', component: Bar } 
] 

// 3. 创建 router 实例，然后传 `routes` 配置 
const router = new VueRouter({ 
　　// （缩写）相当于 routes: routes
　　routes 
})

// 4. 创建和挂载根实例。通过 router 配置参数注入路
const app = new Vue({ router }).$mount('#app')

动态路由分配

两种方式传递$route.params和$route.query

模式	匹配路径	获取参数（路由信息对象）
/user/:username	/user/ligang	$route.params.username
/user?:username	/user?username=ligang	$route.query.username

     
  
       

 嵌套路由

routes: [{
 path: '/user/:id', component: User, 
children: [
 // 匹配 /user/:id 
{ path: '', component: UserHome },
 // 匹配 /user/:id/profile
 { path: 'profile', component: UserProfile }, 
// 匹配 /user/:id/posts
 { path: 'posts', component: UserPosts }
 ] 
}]

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事

router.push({ name: 'user', params: { userId: 123 }})

向路由组件传递 props

默认(常规)方式：通过$route.params获取

const User = { template: '<div>User {{ $route.params.id }}</div>' }
const router = new VueRouter({
 routes: [
　　{ 
　　path: '/user/:id', 
　　component: User 
　　}
　]
})

使用props解耦：只需要将props设置为true

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