vue-route开发注意事项
1、router-link to 动态赋值
router-link组件的to属性值有两种写法，字符串类型和对象类型
如果要动态传值，比如放到for循环中，传入for的index值，这时就必须使用对象形式，动态传值
<router-link :to="{path:'/old_data_details/params/'+item.id}" > </router-link>
2、路由跳转的三种方式，及返回上一级
1）<router-link to="keyframes">点击验证动画效果 </router-link>
to属性值可以是路由字符串，也可以使对象形式
2）this.$router.push({ path:’/user’})
this.$router.push({
path:'/select', //跳转的路径
query:{ //路由传参时push和query搭配使用
id:this.id ,
}
})
3）this.$router.replace{path：‘/’ } 与push类似
返回上一级使用this.$router.go(-1) ,跳转到指定路由this.$router.push('/home')
3、路由重定向（设置默认路由）
4、vue监听路由变化
1）通过watch函数（注意：必须在跟组件中，才能监听到路由的变化）
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
console.log(to.path);
}
},
或者
// 监听,当路由发生变化的时候执行
watch: {
$route: {
handler: function(val, oldVal){
console.log(val);
},
// 深度观察监听
deep: true
}
},
或者
// 监听,当路由发生变化的时候执行
watch: {
'$route':'getPath'
},
methods: {
getPath(){
console.log(this.$route.path);
}
}
2)通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
<script>
export default {
name: 'app',
// 监听,当路由发生变化的时候执行
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
//beforeRouteUpdate守卫并不会在不同路由共用同一组件时触发
//当从/item/22/edit切换到/item/11/edit时，会触发beforeRouteUpdate。
//但如果从/item/22/edit切换到/item/create时，并不会触发beforeRouteUpdate。 // 在当前路由改变，但是该组件被复用时调用，即同一路由下只有参数发生变化的情况下可以用此钩子监听到
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
</script>
3）如上面提到的 <router-view :key="key"></router-view>
对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，页面是不是刷新的，即hashChage函数是不会触发的，这时，可以给路由组件router-view添加 ：key=""属性来阻止复用
然后动态参数的路由跳转就是可以刷新页面了
Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性，这样就可以如愿刷新数据了
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
}
}
5、图片 :src=" " 使用data里面的url时出现404的情况
这么写会出现404错误，图片路径不被webpack解析，直接展示为src='./1.png'
<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
return {
images:[{src:'./1.png'},{./.png}]
}
}
应该这么写，将图片作为模块加载进来require
data(){
return {
iconsData : [
{
pageName:'guohu',
iconUrl:require('../assets/img/guohu.png'),
iconName:'过户',
toUrl:this.handleUrlStr('guohu')
},
{
pageName:'xiaohao',
iconUrl:require('../assets/img/xiaohao.png'),
iconName:'销号及复装',
toUrl:this.handleUrlStr('xiaohao')
}
]
}
}
6、vue路由守卫
//创建路由实例
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta:{
isLogin:true // 添加该字段，表示进入这个路由是需要登录的
}//路由元
},{
path:"/login",
name:"login",
component:Login
}
]
}) // 路由守卫
router.beforeEach((to,from,next)=>{
if(to.matched.some(res=>res.meta.isLogin)){//判断是否需要登录
if (sessionStorage['username']) {
next();
}else{
next({
path:"/login",
query:{
redirect:to.fullPath
}
});
} }else{
next()
}
}); export default router;
to 表示将要跳转到的组件 (目标组件)
console.log(from); //(源组件)
next();
next 是一个函数
next() 进入下一个组件的钩子函数
next(false) 阻止跳转 中断导航
next("/login") 进入指定的组件的钩子函数
注意：路由守卫处理了逻辑之后，必须调用next()函数，路由才会向下执行
7、区分$router 对象和 $route对象
$router : 是路由操作对象，只写对象 ，用来操作路由的行为
$route : 路由信息对象，只读对象，获取当前路由的信息
参考：https://blog.csdn.net/qq_42928918/article/details/88406257
最新文章
- Webpack+React+ES6开发模式入门指南
- 【笔记】JS基础一
- 人工智能 启发式算法（A，A*）
- 创建SO bapi
- Java基础之读文件——使用通道随机读取文件（RandomFileRead）
- CloudSTack4.2 查看所有虚拟机API测试
- 解决Download interrupted: Connection to https://dl-ssl.google.com refused的问题
- 初识CoreText
- Nginx阅读笔记(三)之proxy_pass用法
- Bootstrap相关的网站
- Java并发之线程异常捕获
- TCP/IP 主机路由表获取
- YUI 的模块信息配置优先级关系梳理
- python3字典：获取json响应值来进行断言
- SQL Server函数之空值处理
- t-sql对被除数为0&除数小于被除数结果为0&除法保留2位小数的处理
- Ubuntu安装使用SS客户端上网
- 如何用 async 控制流程
- 生成Release apk
- 20172306《java程序设计与数据结构》第六周学习总结