关于vue项目中的注意点

1.在路由配置中,一般会有根路径“/”,跟自己定义的路径一样的,这是需要写个重定向,如
关于vue项目中的注意点
文章图片
image.png
2.vue中的路径跳转问题
this.route指的是单前的路由信息,this.$router指的是整个项目的路由信息

  1. 【关于vue项目中的注意点】是一个容器,用来放置需要切换的组件。
    4.用这个标签来实现a跳转,to后面是目标路径,如tag="li",就是把这个标签解析为li标签。
    路径的跳转也可以写成绑定属性的形式

    关于vue项目中的注意点
    文章图片
    image.png
在第一个箭头中路径可以写为name,也可以用path代替,第二个是this.$route上的一个方法,隐式传参数,传在params对象里面,在使用name属性时注意写属性!
第二个箭头query里面传递的参数直接在url上显示

关于vue项目中的注意点
文章图片
image.png
5.在不同页面显示不同的信息时候(如脚部每个页面的取舍),需要使用命名视图,这是需要在router-view上添加name属性,如

关于vue项目中的注意点
文章图片
image.png
这样才能去判断渲染哪一个部分,这时需要重新写路由配置
关于vue项目中的注意点
文章图片
image.png
default表示默认需要渲染的样式,footer为定义的名称,定义的名称显示的内容就根据router-view后是否带有name值u判断。
当只渲染一个页面时,就使用component。
7.导航守卫(路由发生切换时候判断允不允许你跳转)
判断当前路由需不需要验证,就需要使用路由元信息,如

关于vue项目中的注意点
文章图片
image.png 则表示home页面不需要验证信息,需要的话则true
全局的导航守卫
关于vue项目中的注意点
文章图片
image.png 局部的导航守卫(三种状态,进入,更新,离开)
关于vue项目中的注意点
文章图片
image.png

    推荐阅读