1.什么是Vue-router？（运行时依赖 --save）
-
安装vue-router
-
使用 vue - router
- 第一步： 导入路由对象，并且调用Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
- 第二步： 创建路由实例，并且传入路由映射配置
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
- 第三步： 在Vue实例中挂在创建的路由实例
const routes = [
{
path: '/',
name: 'home',
component: Home
//配置的映射关系 一个组件对应一个路由
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
## 2. 使用vue-router的步骤 **
-
先创建对应的组件 .vue文件
-
配置映射关系
-
配置router-link 和 router-view
-
router-link 有 to属性 为你注册的path路径
-
router-view 决定你注册组件渲染在什么位置
相当于一个占用一个位置，在什么地方来渲染我们的组件 -
当我需要刚进来就进入到home路径可以redirect重新定向
-
在VUe-router 实例里面渲染
mode: ‘history’, //防止路径凭借的hash值的出现 -
router-link的其他属性(最后会被渲染为一个a标签)
to属性 value设置为 路径 就可以实现跳转。
tag属性 可以将router-link渲染为一个button标签。
replace属性 没有值 防止返回按钮的实现。当某个router-link被点击时会增加一个calss 为 router-link-active -
active-class :当router-link 对应的路由匹配除成功的时候，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
+ 在进行高亮显示的导航菜单或者底部tabbar时，会使用到这个类。
+ 通常不会修改类的属性，直接使用默认的router-link-active -
路由跳转的手动实现方式
this. r o u t e r . p u s h ( ′ / h o m e ′ ) ; t h i s . router.push('/home'); this. router.push(′/home′);this.router.replace(’/home’);
3.动态路由的使用
拼接动态路由
path:’/user/:userId’,
在app.vue里这样写
this.$router.push('/user/余罪')
手动拼接路由
userClick(){
this.$router.push(`/user/${this.user}`)
}
使用router.link 拼接路由
<router-link :to="'/user/' + user" tag='button'> 用户 </router-link>
4.路由的懒加载
***+ 我们知道路由中通常会定义很多不同的页面。
-
这个页面最后被打包放在一个js文件中
-
但是，页面放在一个js文件中会使得这个页面非常的大。
-
如果我们一次性从给服务器请求下来这个页面，可能需要花费一定的时间。
-
如何避免这种情况呢？ 使用路由的懒加载
-
路由懒加载做了什么？
主要时将路由对应的组件打包成一个个的小的js文件。
只有在访问这个路由的时候，才会加载对应的组件。
每一个路由懒加载都会多分配一个小的js文件。 -
路由懒加载的写法
以前的基本写法：import ‘’ from ‘’
路由的懒加载写法： ES6 写法
const home = () => import(’’)
可以实现动态加载路由
5. 路由的嵌套使用
-
比如在home页面中，我们希望使用/home/news 和 /home/message访问一些内容
-
也就是创建子组件
-
创建对应的子组件，并且配置对应的映射
-
在组件内部使用显示出来
-
子路由的path 不加/
{
path:‘news’,
component:HomeNews
}, -
子路由的跳转的时候，用的是/home/news
-
修改路由跳转总是暴露出来无关痛痒的promise报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
6.路由传递参数一
- 当我们从一个页面跳转到另外一个页面时，我们想要传递一些消息
1.第一种方式 动态路由(params的方式)
-
配置为动态路由，方便路由间传递数据
-
给别的路由to的时候需要拼接
-
传递之后通过 this.$route.params 拿到你想要使用的数据
2.第二种方式 query的方式
-
配置路由格式：/router，普通配置
-
传递的方式：对象中使用query的key作为传递方式
-
传递后形成的路径： /router?id=123,/router?id=abc
-
传递数据的方式 {}
-
自定义按钮路由跳转 query传递参数
profileClick(){
this.$router.push({
path:'/profile',
query:{
userId:'kjh',passWord:861918672
}
})
}
6.$router $route （1） 简单了解
-
是我们new 的router对象
-
哪一个路由处于活跃拿到的就是谁
从路径后面拿到你当前的用户id
return this.$route.params.userId 这里的userId 时 index.js中路径后面拼接的
7. $router $toute （2） 详细了解
-
routerClick(){ console.log(this.$router); }, 打印结果为：VueRouter 即我们导入的Vue对象实例 任何组件里面拿到的this.$router 都是Vue对象实例 -
routeClick(){ console.log(this.$route); } 打印结果为：{name: undefined, meta: {…}, path: "/profile", hash: "", query: {…}, …} 也就是当前的活跃路由 profile 里面有query params 等
8. vue导航守卫
为什么使用导航守卫
- 我们来考虑一个需求：在一个spa应用中，如何改变网页的标题呢？
- 网页标题是通过
来显示的，但是spa只有一个固定的HTML，切换不同的页面的时候，标题并不会改变。 - 但是我们可以通过javascripot来修改titile内容， window.document.title = ‘new title’
- 那么在vue中我们在哪里修改，如何修改呢？
导航守卫
前置守卫（guard）
beforeEach()
三个参数的解析：
to: 即将要进入的目标的路由对象
from：当前导航即将要离开的路由对象
next(): 调用该方法后才能进入下一个钩子
router.beforeEach((to, from, next) => {
//从from跳转到to
document.title = to.meta.title;
next(); //如果没有next() 就不能发生跳转了
})
使用这个的时候会有问题，当路由嵌套时，拿出来的title时错的。
document.title = to.meta.title;
所以我们使用的是打印matched里面的第一个位置的title就是他的父亲路由
document.title = to.matched[0].meta.title;
后置钩子函数（如果是后置狗子，也就是affteEach,不需要调用next()）
- afterEach()
路由独享守卫（可以在配置映射关系的时候设置守卫）
const router = new VueRouter({
routes:[
{
path:'/home',
component:Home,
beforeEach：(to,from,next) => {
console.log('aaa');
}
}
]
})
keep-alive(和vue-router的关系)
router-view是一个组件，如果直接被包裹在keep-alive里面，所有的路径匹配到的组件都会被缓存
keep-alive 是Vue内置的一个组件们可以是被包含的组件保留状态，避免重新渲染。
-
created(){
console.log(‘home被创建’);
},
destroyed(){
console.log(‘home被销毁’);
}在home定义这两个寿命周期函数
当你切换到home路由，他就会被创建，当你切换走，就会被销毁。
也就是说每当你切换到home路由的时候，dom重新渲染了这个home路由里面的的组件。
所以组件内部的状态并不能保存。方法：
用<keep-alive>包裹<router-view> <keep-alive> <router-view></router-view> <keep-alive> -
当父亲下面有两个子路由的时候，要想保存这两个状态就会因为路由嵌套问题出错。
解决方法：
生命周期函数先给data里面定义一个默认的path 当前路由活跃的时候 activated(){ this.$router.push(this.path) //这个是因为我们修改了进入home页面的重定向路径 }
activated detivated 这两个函数 只有在 keep-alive 激活时才会触发
activated(){
console.log(this.path)
this.$router.push(this.path) //这个是因为我们修改了进入home页面的重定向路径
},
我们需要在home路由里面定义一个path变量存储我们想要重定向的路由，然后使用activated来重定向
beforeRouteLeave(to, from , next){ 在组建离开时保存当前Home组件内活跃的子组件path
this.path = this.$route.path; //修改path为当前的活跃的路由
console.log(this.$route.path)
next()
}
这样就实现了嵌套路由保存状态的操作。
vue全家桶 vuecore + vue-router + vuex ok！
扫一扫
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
