router-link、router-view解析

router-link、router-view解析

router-link

router-link		默认渲染成<a></a>标签
属性
1、tag='li'		把router-link指定的标签

2、active-class="active"		用来标识选中状态自定样式，类名可以自定义
.active{
  color: red;
}

3、全局路由选中自定义样式，类名可以自定义；不推荐这样做，推荐使用active-class属性

（1）这是源码
export interface RouterOptions {
  routes?: RouteConfig[]
  mode?: RouterMode
  fallback?: boolean
  base?: string
  linkActiveClass?: string
  linkExactActiveClass?: string
  parseQuery?: (query: string) => Object
  stringifyQuery?: (query: Object) => string
  scrollBehavior?: (
    to: Route,
    from: Route,
    savedPosition: Position | void
  ) => PositionResult | Promise<PositionResult> | undefined | null
}

（2）里面有个linkActiveClass属性，设置这个属性可以全局使用选中样式
/**
 * 初始化路由 配置
 * @type {VueRouter}
 */
const router = new VueRouter({
   routes,
   mode: 'history',
   linkActiveClass: 'active'
})

router-view

router-view		用来标识router-link需要渲染的地方，必须是同级别

通过代码使用router

    btn1Click(){
      //退入栈中component
      // this.$router.push('/btn1Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn1Component')
    },
    btn2Click(){
      //退入栈中component
      // this.$router.push('/btn2Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn2Component')
    }