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

嵌套路由

 1 routes: [{
 2  path: '/user/:id', component: User, 
 3 children: [
 4  // 匹配 /user/:id 
 5 { path: '', component: UserHome },
 6  // 匹配 /user/:id/profile
 7  { path: 'profile', component: UserProfile }, 
 8 // 匹配 /user/:id/posts
 9  { path: 'posts', component: UserPosts }
10  ] 
11 }]

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

编程式导航

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

 1 // 字符串
 2 router.push('home')
 3 
 4 // 对象
 5 router.push({ path: 'home' })
 6 
 7 // 命名的路由
 8 router.push({ name: 'user', params: { userId: 123 }})
 9 
10 // 带查询参数，变成 /register?plan=private
11 router.push({ path: 'register', query: { plan: 'private' }})

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

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

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

命名路由

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

1 const router = new VueRouter({
2   routes: [
3     {
4       path: '/user/:userId',
5       name: 'user',
6       component: User
7     }
8   ]
9 })

要链接到一个命名路由，可以给 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
 　　}]
  })

Vue Router （一）基础篇

向路由组件传递 props

猜你喜欢