vue-router踩坑

1.vue3版本之后可以使用VUE add安装路由和vuex（因为他们不是插件）

vue add router

vue add vuex

2.在属性里面要使用对象的表达式，必须要用在动态绑定值里面：（ <router-linke :to="{name:‘about’}">about</router-link>）

3/为什么使用router-link?不用a标签呢？

因为相同页面的时候点击a标签，浏览器会不断的重新渲染，浏览器上的刷新按钮在不停的刷新；但是用了routerlink之后，相同页面重复点击的时候，浏览器只会渲染一次

4、如何在vscode里面输入自定义代码片段

在文件-首选项-用户片段-新建vue- 然后在这个vue.json文件里输入一下代码即可：

 "Print to console": {
    "prefix": "vue:5",
    "body": [
      "<template>",
      "",
      "",
      "</template>",
      "",
      "<script>",
      "",
      "",
      "</script>",
      "",
      "<style>",
      "",
      "",
      "</style>",
    ],
    "description": "Log output to console"
  }

5、如何把router-link渲染成li?  

只要将router-link标签上添加tag="li"属性即可

6、最好每个组件的名字都是以大写开头

7、router-link与router-view是成对出现的，不写router-view上面的router-link就没办法显示出来

8、router-link中vue自动添加了两个class ，当一个路径中包含子路径，我们希望这个父亲路径的名字上有一个active样式，同时子路径的名字上也有一个active样式，那如何定义呢？ 

router-link上有两个class：

.routter-link-exact-active(谁被选中谁就有这个class)

.routter-link-active

path:'/about'将path:'/'认为是自己的children（子路径），所以在写路由的时候，尽量避免把首页的路径定义为：path:'/'而最好定义为：path:'/home'这样就不会是about的子路径了

想要包含子路径的父路径，有active样式，router.js中需要如下图，即可，然后在父路径页面设置routter-link-active的样式，在子路径页面上设置routter-link-active的样式。即可

如果觉得两个样式的名字太长，可以在router.js中重置样式名

这样，页面中渲染出来的效果

9、什么叫动态路由？就是/name/:id  name 后面跟的id是不确定的,就是动态路由

如果这个动态路由的:to属性是用name:''里定义的话，那就一定要给它加一个params属性

findIndex(item=>{

//判断条件语句

})

寻找数组中第一个符合判断条件的item

 

10、redirect重定向；当路由跳转到父路径上时，需要默认显示第一个子路劲，就使用redirect：‘第一个子组件的路径’

11、this.$route.replace()：替换 与 this.$route.push()： 添加的区别

    this.$route.replace()是替换 ， this.$route.push()是压栈，往router里面添加，什么时候用replace什么时候用push要看项目情况

12、浏览器中在网址后面如果输入/默认调到首页，但是当输入/*** 我们没有的页面时，将自动跳转到err页面

    在router.js中添加一条router

{path:'*',
redirect(to){
  if(to.path =='/'){
   return '/home'
  }else{
   reurn{name:'err'}
  }
 }
}

13、一个页面上不止可以显示一个router-view，也可以显示多个，如何显示多个呢？

在首页app.vue中添加一个具名的路由视图即可
<router-view ></router-view>//默认路由视图
<router-view name='abc'></router-view> //添加的另外路由视图

在router.js中
{
path:'/home',
name:'home',
components:{
 default:Home,
 abc:Abc
  }
}

14、自定义的对象存放在meta属性中