对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用， 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。
Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架进行结合。当然官方也给出了路由的方案：
vue-router; 建议还是用官方的最好，使用量也是最大，相对来说Vue框架的升级路由组件升级也会及时跟上，所以为了以后的维护和升级方便还是使用Vue自家的东西最好。
7.1. Vue-router的版本对应
注意: [email protected] 只适用于 Vue 2.x 版本。 [email protected] 对应于Vue1.x版本。
- 的Github地址：vue-router
- 文档地址
7.2. vue-router的安装使用
- CDN连接方式
https://unpkg.com/vue-router/dist/vue-router.js
- npm 安装
npm install vue-router
7.3. vue-router 入门demo
vue-router开发的步骤：
-
第一步： 引入vue和vue-router包。
可以使用cdn的方式或者npm的方式。如果配合npm和webpack的话可以直接作为一个模块导入即可。但是作为初学入门的话建议还是 直接使用cdn包的形式，先学会怎么用路由。
-
第二步： 定义路由跳转的组件
// 1\. 定义（路由）组件。 const Foo = { template: 'foo' } const Bar = { template: 'bar' } 第三步： 定义路由规则对象
// 每个路由path应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 创建路由对象
const router = new VueRouter({
routes // （缩写）相当于 routes: routes，es6的新语法
})
- 第四步： 创建Vue对象，并加重上面创建的路由对象
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
- 第五步： 在模板中编写路由跳转链接
Hello App!
Go to Foo
Go to Bar
最终的代码：
Hello App!
Go to Foo
Go to Bar
7.4. 使用vue-router的综合实例
下面是一个综合的例子, 页面上有几个导航的按钮，然后通过点击不同的按钮，可以在当前页面切换不同的组件。
Vue入门之extend全局方法
email to: {{ email }}
7.5. 路由参数获取
定义路由路径的时候，可以指定参数。参数需要通过路径进行标识：/user/:id就是定义了一个规则，/user开头，然后后面的就是id参数的值。 比如：
路由规则： /user/:id
/user/9 => id = 9
/user/8 => id = 8
/user/1 => id = 1
然后在跳转后的vue中可以通过this.$route.params.参数名获取对应的参数。 比如代码：
Vue入门之extend全局方法
7.6. js控制路由跳转
上面我们演示的都是通过router-link进行跳转。 其实我们还可以通过js编程的方式进行路由的跳转。
// 当前路由的view跳转到 /home
router.push('home')
// 对象, 跳转到/home
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
7.7. 嵌套路由
嵌套路由跟普通路由基本没有什么区别。但是可以让vue开发变的非常灵活。 官网这块写的也非常好，我就直接拷贝了（原谅我吧。） 实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 。例如，在 User 组件的模板添加一个 ：
const User = {
template: `
User {{ $route.params.id }}
中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: 'posts',
component: UserPosts
}
]
}
]
})
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。 你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})
联系老马
对应视频地址：http://qtxh.ke.qq.com
老马qq： 515154084
老马微信：请扫码
