什么是vue Router？
Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
vue Router包含的功能有哪些？
1.嵌套的路由/视图表
2.模块化的、基于组件的路由配置
3.路由参数、查询、通配符
4.基于 Vue.js 过渡系统的视图过渡效果
5.细粒度的导航控制
6.带有自动激活的 CSS class 的链接
7.HTML5 历史模式或 hash 模式，在 IE9 中自动降级
8.自定义的滚动条行为
vue Router安装方法：
npm install vue-router
两种引入路由组件的方式
第一种
import Singer from './../views/singer.vue'
{
path: '/',
component：Singer
}
第二种
{
path: '/index',
component: () => import('./../views/index.vue')
}
重定向
把当前访问的路径，重定向到另一个位置重定向也是通过 routes 配置来完成，下面例子是从 /main 重定向到 /home：
const router = new VueRouter({
routes: [
{ path: '/main', redirect: '/home' }
]
})
重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
重定向的目标甚至可以是一个方法，动态返回重定向目标：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
命名路由与别名
{
path: '/',
name: "home", // 命名路由
alias: 'home_page', // 别名，指的是home_page和home这两个名字指向的是同一个页面
component: Home,
},
动态路由
定义动态路由
{
path: '/argu/:name', // 动态路由
name: 'argu', // 命名路由
component: ()=>import('@/views/Argu.vue'),
}
获取动态路由的参数
{{ $route.params.name }}
$route：当前加载页面的路由对象
嵌套路由
{
path: '/parent',
name: 'parent',
component: ()=> import('@/views/Parent.vue'),
children: [
{
<!-- 第一个子路由 -->
path: 'child1',
component: () => import("@/views/Child1.vue")
},
{
<!-- 第二个子路由 -->
path: 'child2',
component: () => import("@/views/Child2.vue")
}
]
}
http://localhost:8080/#/parent/child1
http://localhost:8080/#/parent/child2
命名视图
有时候想展示多个视图，而不是嵌套展示,例如创建一个布局，有 email 和 tel 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<!-- 默认的是default -->
<router-view ></router-view >
<router-view name="email"></router-view >
<router-view name="tel"/></router-view >
{
// 命名视图
path: '/named_view',
// 这里有s，代表多个组件
components: {
default: () => import("@/views/Child.vue"),
email: () => import("@/views/Email.vue"),
tel: ()=> import("@/views/Tel.vue")
}
}
路由如何展示到页面上
<!-- 路径方式 -->
<router-link to="/">Home</router-link>
<!-- 命名路由的方法，此方法必须给路由命名 -->
<router-link :to="{ name: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ name: 'about' }">About</router-link>
<router-link :to="about">About</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
编程式的导航
js操作路由
1、返回上一页
第一种方式
this.$router.back();
第二种方式
this.$router.go(-1);
2、前进一页
this.$router.go(1)
3、跳转到某个页面
方法一：路径方法
this.$router.push("/parent")
方法二：命名路由的方法
this.$router.push({
name: 'parent'
})
// 也可以在参数中添加一些信息
this.$router.push({
// 参数（查询信息）
name: "parent",
query: {
name: 'music'
}
// 或者
// 参数
name: 'argu',
params: {
name: "music"
}
// 或者（ES6的模板语法）
path: `/argu/${name}`
})
4、替换到某个路由
this.$router.replace({name:"parent"})
跳转与替换的区别：
replace：
当使用push时，会在浏览历史留下记录
replace的话，浏览历史会被替换，不会留下以前的记录。
暂时先到这里，后面再更新吧。
