共计 2841 个字符，预计需要花费 8 分钟才能阅读完成。
1、安装 vue-router
npm install vue-router
yarn add vue-router
2、引入注册 vue-router
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
3、链接跳转
<router-link to=’/home’></router-link> // 你可以在 template 中使用它实现一个可点击跳转到 home.vue 的 a 标签
this.$router.push(‘/about’); // 在 methods 方法中跳转到 about 页面
this.$router.go(‘-1′); // 在 js 中返回上一个页面
4、经常用到
this.$route.params.name // 在 js 中获取路由的参数
.router-link-active // 当前选中路由的匹配样式
$route.query // 获取查询参数
$route.hash // 哈希
5、路由配置
export default new Router({
routes:[
{// 第一层是顶层路由，顶层路由中的 router-view 中显示被 router-link 选中的子路由
path:’/’,
name:’Home’,
component:’Home’
},{
path:’/user/:id’, //www.xxx.com/user/cai
name:’user’, //:id 是动态路径参数
component:’user’,
children:[
{
path:’userInfo’, //www.xxx.com/user/cai/userInfo
component:’userInfo’ // 子路由将渲染到父组件的 router-view 中
},{
path:’posts’,
component:’posts’
}
]
}
]
})
Vue.use(Router);
6、路由参数方式变化时，重新发出请求并更新数据
// 比如：用户一切换到用户二, 路由参数改变了，但组件是同一个，会被复用
// 从 /user/cai 切到 /user/wan
在 User 组件中：
// 方法 1：
watch:{
‘$route'(to,from){
// 做点什么，比如：更新数据
}
}
// 方法二：
beforeRouteUpdate(to,from,next){
// 同上
}
7、编程式导航
router.push({name:’user’,params:{userId:’123′}}) // 命名路由导航到 user 组件
<router-link :to='{name:’user’,params:{userId:’123′}}’> 用户 </router-link>
router.push({path:’register’,query:{plan:’cai’}}) //query 查询参数
router.push({path:`/user/${userId}`}) //query
router.push(location,onComplete,onAbort)
router.replace() // 替换
router.go(-1)
8、命名视图
// 当前组件中只有一个 router-view 时，子组件默认渲染到这里
<router-view class=’default’></router-view>
<router-view class=’a’ name=’left’></router-view>
<router-view class=’b’ name=’main’></router-view>
routes:[
{
path:’/’,
components:{
default:header,
left:nav,
main:content //content 组件会渲染在 name 为 main 的 router-view 中
}
}
]
// 嵌套命名视图就是：子路由 + 命名视图
9、重定向与别名
const router = new VueRouter({
routes: [
{path: ‘/a’, redirect: ‘/b’},
{path: ‘/b’, redirect: { name: ‘foo’}}, // 命名路由方式
{path: ‘/c’, redirect: to => { // 动态返回重定向目标
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径 / 路径对象
}}
]
})
const router = new VueRouter({
routes: [
{path: ‘/a’, component: A, alias: ‘/b’} // 别名：当访问 /b 时也会使用 A 组件
]
})
10、路由组件传参
const User={
props:[‘id’],
template:`<div>{{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}
}
]
})
11、HTML5 的 History 模式下服务端配置
const router = new VueRouter({
mode: ‘history’,
routes: [
{path: ‘*’, component: 404}
]
})
后端配置：
//Nginx
location / {
try_files $uri $uri/ /index.html;
}
//Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
//Node.js
const http = require(‘http’)
const fs = require(‘fs’)
const httpPort = 80
http.createServer((req, res) => {
fs.readFile(‘index.htm’, ‘utf-8’, (err, content) => {
if (err) {
console.log(‘ 无法打开 index.htm 页面.’)
}
res.writeHead(200, {
‘Content-Type’: ‘text/html; charset=utf-8’
})
res.end(content)
})
}).listen(httpPort, () => {
console.log(‘ 打开: http://localhost:%s’, httpPort)
})
// 使用了 Node.js 的 Express
[使用中间件][1]