官方文档地址：https://router.vuejs.org/zh-cn/
介绍
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
安装
直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
NPM
在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里，然后使用以下命令进行安装:
npm install vue-router
安装成功后， 可以查看package.json文件，你会发现多了"vue-router": "^3.0.1"的配置。如下：
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
如果在一个模块化工程中使用它，在必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router' //ES6语法导入
Vue.use(VueRouter) //注册
如果采用vue-cli脚手架安装，安装的时候会自带vue-router,main.js文件中引用
import router from './router' //ES6语法导入
new Vue({
el: '#app',
router, //注册
template: '<App/>',
components: { App }
})
使用
router/index.js文件，管理路由器的创建：
第一步：加载模块
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/home/index' // import命令加载这个模块
import indexHome from '../views/home/children/index'
import addHome from '../views/home/children/add'
第二步：
Vue.use(Router) //注册
第三步：定义路由,包括二级路由
export default new Router({
//mode:'history',
routes: [ {
path: '/',
name: 'Index',
component: Index,
children:[
{path:'',component:indexHome}, {path:'add',component:addHome}
] },
})
第四步：使用定义好的路由
第一种使用方式：
<router-link to='/'>首页</router-link>
<router-link to='/add'>子页面</router-link>
第二种使用方式
this.$router.push('/')
this.$router.push('/add')
History 模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
建议：后台在没有配置的情况下，不建议开启history 模式，否则项目编译过后的页面打开空白，本地运行正常。
更多资料建议查看官方文档
网友评论