Vue
1.需要导入vue模块 import Vue from 'vue' 需要导入vue-router模
块 import VueRouter from 'vue-router'
2.导入页面组件
3.vueRouter是vue的一个插件 需要注册插件才能使用 Vue.use(V
ueRouter)
4.hash模式 mode: 'hash' hash模式在路径后面加上#/ 这样浏览器会认为#后面是锚点 不是重新请求新的页面
5.history 通过浏览器的历史记录来 切换路由 history 它只能支持 现代浏览器 vue会自动降级处理 当 history 不支持的时候会制动使用hash模式 谁的子路由 就在谁的组件里切换
router 用来处理路由（跳转）的方法集合
$router中常用的方法
//this.$route这个对象用于获取路由的参数数据
1.push 跳转到某个页面 会添加历史记录（因为有历史记录所以可以调用$router.back()方法返回到上一步）
2.replace 也可以跳转到某个页面 但是不会记录历史（因为没有历史记录调用$router.back()方法时不会返回到当前的一步而是会跳转到其他页面）
3. go(-1)
4. back() 返回上一个页面
｀｀｀
// 如果你要使用router 传递参数到目标页面
// 除了使用动态参数以外
// 还可以使用以下的query方式传参 查询字符串参数
// 要使用query 传递查询字符串必须和path一起使用
// this.$router.push({
// path: '/goods/type1/nz2.html',
// query: {
// xx: 100
// }
// })
// 要直接传递路径参数的方式跳转
// 必须给当前要跳转的路由路径 取一个name 名称
// 然后在配合 params 跳转路径
// this.$router.push('/goods/type1/nz2.html')
// 在push的使用要使用 params传递路径参数 必须配合 路由路径的name属性来使用
this.$router.push({
name: 'GoodsDetail',
params: {
type: 'type1',
sid: 'nz2.html'
},
query: { // 还可以附加 查询字符串参数
a: 100
}
})
<router-link to=""></router-link> 类似a标签用于链接跳转
<router-view></router-view>用来作为一个跳转的容器(如果要想在那个页面中跳转就必须在哪个页面写容器)谁的子路由 就在谁的组件里切换
watch: { // watch可以监听实例里所有成员的变化
// 这个路由参数 在第一次加载的时候是检测不了路由的变化的
$route(v) {
// console.log(v)
this.id = v.params.newsid
this.title = v.params.newsid + '标题'
// 还可以通过这个新闻id 去后台ajax请求新闻的数据来显示不同的内容
// 在路径上传递的query参数可以使用$route对象的query属性来获取
console.log(this.$route.query)
}
}
created() {//页面实例化好后执行这个钩子
// 这个路由参数 在第一次加载的时候是检测不了路由的变化的
// 第一次加载的路由数据需要通过 vue的生命周期函数函数来获取
// 预加载
// $route 用来获取当前页面的路由信息
this.id = this.$route.params.newsid
this.title = this.$route.params.newsid + '标题'
// $router 用来处理路由跳转的方法集合
// console.log(this.$route)
// console.log(this.$router)
}
导出 export default new VueRouter({
mode: 'history', //路由的处理模式
routes: [// 路由的匹配规则
{ // 一个对象就是一个匹配规则
// 要匹配的路径
path: '/', // http://localhost/
component: Index //给匹配到的路径提供一个组件
},
{
path: '/news',
component: News,
children: [ //子路由
{
path: '/',
component: NewsList
},
{
path: ':newsid',
component: Detail
}
]
},
{
path: '/login',
component: Login
},
{
path: '/404', //匹配任意路径
component: NotFound
},
{
path: '*',
redirect: '/404' //重定向处理
}
]
})
6.要在hash模式和history模式间 兼容的话必须使用router-link to="" 不能使用a标签(a标签在histor模式下支持，但有些浏览器不支持history模式)
动态路由
导航守卫
keep-alive(缓存当前的状态)
单页面跳转时使用keep-alive标签包裹想要缓存的元素上时，返回后那个数据将保持不变。
