路由
vue路由
在方法里面跳转页面
1. 不带参数
this.$router.push(‘/home‘)
this.$router.push({name:‘home‘})
this.$router.push({path:‘/home‘})
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
2. query传参
this.$router.push({name:‘home‘,query: {id:‘1‘}})
this.$router.push({path:‘/home‘,query: {id:‘1‘}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
4. params传参
this.$router.push({name:‘home‘,params: {id:‘1‘}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
5. this.$router.replace() (用法同上,push)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
6. this.$router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
vue的路由模式?
hash history
hash模式会在url上显示’#'，而history模式没有
刷新页面时，hash模式可以正常加载到hash值对应的页面，history模式没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由
兼容性上，hash模式可以支持低版本浏览器和IE
== vue-Router中有哪些导航守卫?==
「全局前置钩子」：beforeEach,beforeResolve,afterEach
「路由独享守卫」：beforeEnter
「组件内部守卫」：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
导航解析流程：
导航被触发
在失活的组件里调用beforeRouteLeave离开守卫
调用全局的beforeEach守卫
在重用的组件里调用beforeRouteUpdate守卫
在路由配置里调用beforeEnter守卫
解析异步路由组件
在被激活的组件里调用beforeRouteEnter守卫
调用全局的beforeResolve守卫
导航被确认
调用全局的afterEach守卫
触发Dom更新
用创建好的实例调用beforeRouteEnter守卫中传给next的回调
window.history 一个是window的#变化
有涉及到路由拦截？
Vue-router 路由生命周期也叫导航守卫
1.路由钩子函数：一个路由跳转到另一个路由(还没到)的过程中触发 beforeEach(function (to, from, next){}
2.路由钩子函数：一个路由已经跳转到了另一个路由后触发 afterEach(function (to, from) {}
3.参数：
to 你要去哪里
from 你从哪里来
next 你接下来要做什么
4.next的参数详解
next(function) 一定要调用这个方法来resolve这个钩子函数。执行效果依赖next方法的调用参数
next() 什么都不做继续执行到调转的路由
next(false) 中断当前导航 没有跳转 也没有反应
next(“/”) 参数是路径 调转到该路径
next(error) 如果next参数是一个Error实例 导航终止该错误，会传递给router.onError()注册过的回调中
路由守卫怎么弄的?
路由的生命周期有哪些？
vue路由生命周期?
搭建路由,拦截路由?
分3块：全局守卫，路由独立守卫，组件内守卫
-------------全局守卫 main.js
beforeEach----beforeResolve----afterEach
router.beforeEach((to, from, next) => {
// 全局前置守卫
// if(to.fullPath === '/shoppingCart'){
// //如果没有登录?对不起先去登录一下
// next('/login')
// }
console.log('1 beforeEach', to, from)
next()
})
// 时间触发比 全局前置守卫慢些
router.beforeResolve((to, from, next) => {
// 全局解析守卫
console.log('3 beforeResolve', to, from)
next()
})
router.afterEach((to, from) => {
// 全局后置守卫、钩子
console.log('4 afterEach', to, from)
})
-----------独立路由守卫 router.js
-------beforeEnter
{
path: '/a',
name: 'pageA',
components:{
default:pageA,
ppp:Test
},
beforeEnter:(to,from,next)=>{
console.log('2 beforeEnter',to,from)
next()
},
},
-----------------组件内的守卫 xxx.vue
export default {
beforeRouteEnter(to,from,next){
//这里 拿不到this
// 路由跳转，使用此组件时触发
console.log('beforeRouteEnter',to,from)
next()
},
beforeRouteUpdate(to,from,next){
//可以获取 this
// /a/123 /a/456 当 组件被复用时，触发此方法
console.log('beforeRouteUpdate',to,from)
next()
},
beforeRouteLeave(to,from,next){
//可以获取this
//路由跳转，不适用此组件时触发
console.log('beforeRouteLeave',to,from)
next()
}
}
vue-Router中有哪些导航守卫
「全局前置钩子」：beforeEach,beforeResolve,afterEach
「路由独享守卫」：beforeEnter
「组件内部守卫」：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
怎么实现vue路由?
------------------------------------this.$router.push()
this.$router.push({path: "/project/detail", query: currentRow});
-----------------------------------<router-link> 标签
<router-link :to="{path:'/project/detail', query:{id: scope.row.id}}" style="color: #20b6f9"></router-link>
有涉及到路由拦截？
beforeEach(function (to, from, next){
if (to.fullPath == "/Login") {
next();
}else if(to.meta.requireAuth){
// 判断该路由是否需要登录权限
if (store.state.Authorization) { // 获取当前的token是否存在
console.log(“token存在”);
next();
} else {
console.log(“token不存在”);
next({
path: ‘/login’, // 将跳转的路由path作为参数，登录成功后跳转到该路由
query: {redirect: to.fullPath}
})
else{
next({path: '/Login'})
};
}
路由懒加载，怎么做的，router的？
也叫延迟加载，即在需要的时候进行加载，随用随载。
为啥要懒加载?
-------------实现方式1
非懒加载：component: index
vue的路由配置文件(routers.js)，一般使用import引入的写法，当项目打包时路由里的所有component都会打包在一个js中，在项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢;
语法：component:() => import(’./About.vue’)；
-------------实现方式2
vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
语法：component: resolve => require([‘放入需要加载的路由地址’], resolve)
其他
commonjs模块与ES6模块的区别
1.commonjs输出的，是一个值的拷贝，而es6输出的是值的引用；
2.commonjs是运行时加载，es6是编译时输出接口；
路由分几种模式，有啥区别？本质上有啥区别？
vue的路由模式
Hash:
1、url路径会出现 # 字符
2、hash值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求
3、hash值的改变会触发hashchange事件
History:
1、整个地址重新加载，可以保存历史记录，方便前进后退
2、使用 HTML5 API（旧浏览器不支持）和 HTTP服务端配置，没有后台配置的话，页面刷新时会出现404
区别
hash模式会在url上显示’#'，而history模式没有
刷新页面时，hash模式可以正常加载到hash值对应的页面，history模式没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由
兼容性上，hash模式可以支持低版本浏览器和IE
路由hash与history,当我们打包后访问的页面是空白页是什么原因？
-------如果vue-router使用history模式，部署时要注意什么？
HTTP 服务端需要进行配置，将页面请求全部重定向到 index.html。参考官方文档
nginx 配置：
location / {
try_files $uri $uri/ /index.html;
}
路由的跳转页面有哪几种方法，页面前进，后退
路由传参
params
1.在router/index.js里边配置每个页面的路径，name属性
{
path: '/login/:userId/:id',
name:'Message',
}
2,在传值页面的写法
this.$router.push({
name:"'Message'",//这个name就是你刚刚配置在router里边的name
params:{
userId:"10011"
}
})
3.router-link
<router-link :to="{name:'home', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
<router-link :to="{name:‘home‘, query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
this.$route.params.userId
query
this.$router.push({
path:"/login",//这个path就是你在router/index.js里边配置的路径
query:{
userId:"10011"
}
})
this.$router.replace() (用法同上,push)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$route.query.userId
区别
params传参和query传参区别类似于post和get方法。params传参地址栏不会显示参数，而query传参会将参数显示在地址栏中
params传参刷新页面参数会丢失
params传参对应的路由属性是name，而query传参对应的路由属性既可以是name，也可以是path
this.router.push(‘/home‘)
go
router.go(n)这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。this.router.go(n)向前或者向后跳转n个页面，n可为正整数或负整数
扫一扫
3779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
