配置路由文件 index.js
使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1.引入vue
import Vue from 'vue'
// 2.引入vue路由
import VueRouter from 'vue-router'
// 3.引入组件
import Hello from '@/components/Hello'
import Word from '@/components/Word'
Vue.use(VueRouter)
export default new Router({
mode: 'history', // HTML5 History 模式
routes:[
{
path: '/hello', // 路径
component: Hello // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
},
{
path:'/word', // 路径
component: Word // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
}
]
})
路由文件注入到main.js文件中
import Vue from 'vue';
import App from './App';
import router from './router/index'; // 引入路由配置文件 index.js
Vue.config.productionTip = false;
// 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
el: '#app',
router, // (缩写) 相当于 router: router
render(h){
return h(App);
}
})
或者
new Vue({
router,
render: h => h(App) // 此写法与上边的相同，使用了箭头函数
}).$mount('#app')
组件中配置路由跳转
<template>
<div>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接 相当 `<a>` 标签的属性 href -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link> // 浏览器解析成：<a href="/foo">Go to Foo</a>
<router-link to="/bar">Go to Bar</router-link> // 浏览器解析成：<a href="/bar">Go to Bar</a>
<router-link :to="href">Go to Bar</router-link> // 动态绑定to值
<!-- 路由出口 (配置路由插座)-->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
data(){
return {
href:"/hello"
}
}
}
</script>
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由
嵌套路由
export default new Router({
mode: 'history', // HTML5 History 模式
routes:[
{
path: '/hello', // 路径
component: Hello // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
},
{
path:'/word', // 路径
component: Word // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
children: [ // 嵌套路由
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})
要注意，以“/”开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。
所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
动态路由匹配
export default new Router({
mode: 'history', // HTML5 History 模式
routes:[
{
path: '/hello', // 路径
component: Hello // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
},
{
path: '/word/:id', // 动态路由匹配
component: Word // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
children: [ // 嵌套路由
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})
一个“路径参数”使用冒号 : 标记，当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用
{{ this.$route.params.id }}
一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：
| 模式 | 匹配路径 | this.$route.params |
|---|---|---|
| /user/:username | /user/evan | { username: 'evan' } |
| /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' } |
除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等
响应路由参数的变化
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。
因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
捕获所有路由或 404 Not found 路由
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：
{
// 会匹配所有路径
path: '*'
}
{
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*'
}
当使用一个通配符时，$route.params 内会自动添加一个名为 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'
命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称
export default new Router({
mode: 'history', // HTML5 History 模式
routes:[
{
path: '/hello', // 路径
name: 'hello', // 命名路由
component: Hello // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
},
{
path: '/word/:id', // 路径
name: 'word', // 命名路由
component: Word // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
children: [ // 嵌套路由
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事：
this.$router.push({ name: 'user', params: { id: 123 }})
编程式路由和声明式路由
this.$router.push('/路由地址') // 编程式路由
<router-link :to='/路由地址'></router-link> // 声明式路由
this.$router.replace('/路由地址') // 编程式路由
<router-link :to='/路由地址' replace> // 声明式路由
this.$router.push(location, onComplete?, onAbort?)
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以当用户点击浏览器后退按钮时，则回到之前的 URL
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用router.push(...)
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串
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 属性。
this.$router.replace(location, onComplete?, onAbort?)
跟 this.$router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
this.$router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)
// 后退一步记录，等同于 history.back()
this.$router.go(-1)
// 前进 3 步记录
this.$router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)
重定向和命名
重定向
const router = new VueRouter({
routes: [{
path: '/a',
redirect: '/b' //当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b（显示b页面）
}]
})
别名
const router = new VueRouter({
routes: [{
path: '/a',
alias: '/b' //当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a（显示a页面），如果访问的是/a，路由匹配仍为 /a（显示a页面）
}]
})
网友评论