vue（5）- vuerouter（1）

一、http://localhost:8080/#/和http://localhost:8080/

默认，打开http://localhost:8080/会变成http://localhost:8080/#/，出现#

因为这个#其实是VUE的HASH模式所产生的，正确点来说是因为VUE使用了HASH模式。

解决：加上mode:’history’

二、嵌套路由/二级路由

（配置好父路由component后，在父路由中添加children属性来配置这个父路由的子路由）

• 需要注意的是：父组件中的<router-view></router-view>是子组件的占位符是必不可少的，与子路由链接<router-link>可在同一个组件中

嵌套路由的现象：

点击了子路由跳转后父路由组件的内容一直呈现；

子路由的内容进行切换，地址栏的路径也随之改变。

• 子路由中加不加‘/’ 的区别：当点击son1的时候加 ‘/’会在地址栏中显示  #/son1;不加 ‘/’的时候回在地址栏中显示 #/nest/son1
  • 如下图，是加了/

           

• 如下图，不加/

• ​​​​​​​                        

 三、linkActiveClass router被激活时，给一个默认class

则某个router被激活时，会有一个class active

const router = new VueRouter({

  routes,

  mode: 'history',

  linkActiveClass: 'active'

})

export default router