一、vue-router
1.安装
npm install vue-router -D
2.使用
vue-router 是一个插件，需要在 Vue 的全局引用中通过 Vue.use()将它引用到 Vue 实例当中。在我们的工程中。main.js是程序入口文件，所有的全局性配置都会放在这里面。
3.路由配置
页面就是组件，那么一个路由定义就该与一个组件相对应。第一个页面应该是“首页”，也就是默认路由。
4.配置一个简单的路由
准备两个页面，格式相同即可：
<!--/Home.vue-->
<template>
<div>Home</div>
</template>
<style></style>
<script>
export default {}
</script>
在 main.js 中
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})
在 router.js 中配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Explorer from '@/components/Explorer'
import Cart from '@/components/Cart'
import Me from '@/components/Me'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/home',
name: 'home',
component: Home
}, {
path: '/explorer',
name: 'explorer',
component: Explorer
}
]
})
以后凡是遇到配置文件，就可以单独配置，在 main.js 中仅引用配置到全局变量。
二、路由的模式
1.URL
- history 地址模式：
http://localhost/home - 非 history 地址模式：
http://localhost/#home
2.三种模式详解 - Hash：使用 URL hash 值来作为路由。支持所有浏览器，包括不支持 HTML5 History API 的浏览器。
- History：依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
- Abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器 API，路由会自动强制进入这个模式。
模式配置方式：
export default new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
}, {
path: '/explorer',
name: 'explorer',
component: Explorer
}
]
})
三、路由与导航
1.vue-router 提供的两个指令标签
-
<router-view>——渲染路径匹配到的视图组件，它还可以内嵌自己的<router-view>，根据嵌套路径渲染嵌套组件。 -
<router-link>——支持用户在具有路由功能的应用中（点击）导航。
<template>
<div id="app">
<div class="tabs">
<ul>
<li>
<router-link :to="{ name : 'home' }">
Home
</router-link>
</li>
<li>
<router-link :to="{ name : 'explorer' }">
Explorer
</router-link>
</li>
</ul>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
使用<router-link :to="{ name : 'explorer' }">的形式而不用<router-link :to="/explorer">，给每一个路由取一个名字，避免更改路由时需要再改导航的路径。
2.指定输出元素
不指定输出元素时，代码最终的输出结果会是：
<ul>
<li>
<a href="#>
<div>Home</div>
</a>
</li>
<li>...</li>
</ul>
其实我们并不需要<a>标签，可以通过属性指定我们可以直接输出到<li>标签上节省出更多的代码。<router-link :to="{ name : 'home' }" tag="li">
3.动态路由
routes:[{
name: 'BookDetails',
path: '/book/:id',
component: BookDetails
}]
在参数名之前加上“:”，然后将参数写在路由的 path 内。
在<router-link>中我们可以加入一个 params 的属性来指定具体的参数值：
<router-link :to="{name: 'BookDetials', params: { id : 1 }" >
</router-link>
参数值的读取方式：
export default {
created () {
const bookID = this.$router.params.id
}
}
使用路由参数时，例如从/books/1导航到/books/2，原来的组件实例会被复用，比起销毁再创建复用则显得更加高效，不过，这也意味着组件的生命周期钩子不会被重复调用，也就是说created、mounted 等钩子函数在页面第二次加载时会失效。那么，当组件复用时，想对路由参数的变化做响应的话，就需要在 watch 对象呗添加$route 对象变化的跟踪函数:
export default {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应
}
}
}
4.前套路由
在 route.js 的配置中，要显示子视图与子路由的对应。利用 children 数组属性就可以定义子路由了。
routes:[{
name: 'Main',
path: '/',
component: Main,
children: [
{name: 'Home', path: 'home', component: Home,}
]
}]
子路由中的路径就不需要加上"/"了，生成时主路由的 path 会被自动添加到自路由前。另外，以"/"开头会被当做根路径，就不要加"/"了。
5.切页动画
Vue 提供了 transition 的封装组件。
有4个（CSS）类名在 enter/leave 的过度中切换：
- CSS 类名-enter
- CSS 类名-enter-active
- CSS 类名-leave
- CSS 类名-leave-active
四、导航状态样式
当用户点击 Tabs 上的任意一个标签组件时，组件应该进入一个“激活”状态。在默认情况下<router-link>对应的路由匹配成功，就会自动设置 class 属性值为.router-link-active，如果我们想设置“激活”状态样式类名为 active，可以通过 active-clas 属性进行设置。
<router-link :to=" { name: 'Home' } "
active-class="active" >
</router-link>
但如果要在页面上这样显示声明，每一个都写一个，这样就不 DRY 了。所以，可以在 router.js 中配置一下语句：
const router = new VueRouter ({
// ...省略
linkActiveClass: "active"
})
样式激活是依据对 URL 的全包含匹配，也就意味这"/"跳转到别的路由依旧会保持“激活”状态。在这种情况下就需要使用精确匹配模式，使用 exact 属性。
<router-link :to=" { name: 'Home' } " exact>
</router-link>
五、History 的控制
当我们在使用 HTML5的 History 模式的时候，每次路由的改变都会被“推”（push）到导航历史中保留，在某些情况下我们并不需要浏览器这样做，而是希望他能将原有的记录进行替换。
首先，需要了解<router-link> 用两种属性来调用 Vue 实例内$router 对象的三个方法：
| router 的方法 | 属性 | 说明 |
|---|---|---|
| push() | — | 默认调用此方法 |
| append() | append | 将目标 URL 追加到当前 URL 下 |
| replace() | replace | 以目标 URL 替换现有的 URL |
设置 replace 就会调用 router.replace() 而不是 router.push()，于是导航后就不会留下 History 记录。
<router-link :to=" { name: 'Home' } " replace>
</router-link>
设置 append 属性后，则在当前（相对）路径前添加基本路径。例如，从 /a 导航到相对路径 b，如果没有配置 append，则路径为 /b，如果配置了，则为 /a/b。
六、关于 Fallback
当使用 History 模式的时候，点击<router-link>会自动调到相应的路径，但是在浏览器直接输入" http://loacalhost/home"则会404，因为浏览器直接将这个地址发向服务器。
解决办法是将所有发到服务器端的请求利用服务器端的 URLRewrite 模板重新转发给/index.html。
常见：
Apache
在配置文件中加入 URLRewrite模块配置
Nginx
将404页面自动重定向到/index.html
Node.js(Express)
安装 Fallback 插件
注意
一旦配置，服务器将不再返回404错误页面，为避免这种情况，应该在 Vue 应用里覆盖所有的路由情况，然后在给出一个404页面。
const router = new VueRouter({
mode: 'history',
routes: [
{path: '*', component: NotFoundComponent}
]
})
网友评论