路由跳转方式

路由跳转方式

路由的跳转方式有两种形式。

一、声明式导航

router-link标签 ,可以把router-link理解为一个a标签，它 也可以加class修饰

• 属性：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class
• to（必选参数）：类型string/location。

<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

• replace：类型boolean，默认值 false。会调用 router.replace() ，而不是 router.push()，于是导航后不会留下 history 记录 。
• append：类型boolean，默认值 false。 设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b。
• tag：类型string，默认值 “a” 。想要 <router-link> 渲染成某种标签。
• active-class：类型string，默认值 “router-link-active” 。选中样式，可以配置文件中统一修改 “linkActiveClass:'active'”。

<router-link to="/home"  replace tag="button" active-class="active">首页</router-link> 
<style>
  .active{
    color: green;
  }
</style>

• exact：类型: boolean，默认值: false。“是否激活” 默认类名的依据是全包含匹配。

• exact-active-class：类型string，默认值 “exact-active-class” 。当链接被精确匹配时候的选中样式，可以配置文件中统一修改 “linkExactActiveClass:'exact-active”。

<router-link to="/home" active-class="active" exact>首页</router-link>
<!--
    1、/home
    2、/home/new
      '/home'的exact为false时,当前路径是 '/home/new', '/home'也是激活样式
      '/home'的exact为true时,当前路径是 '/home/new','/home'是激活样式
-->

<!-- 应用场景：导航切换问题, 切换到别的子路由的时候,父路由激活样式都一直存在的问题 -->


<!--等价于-->
<router-link to="/home" exact-active-class="exact-active">首页</router-link>

二、编程式导航

编程式导航 push|replace：声明式导航能做的编程式都能做，编程式导航除了进行路由跳转，而且还可以处理一些业务

• push()：跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由  变成 /user/123
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})

• go()：页面路由跳转 前进或者后退

this.$router.go(-1) // 后退

• replace()：替换当前的页面，不会向 history 栈添加一个新的记录。一般使用replace来做404页面。

this.$router.replace(’/’)
//配置路由时path有时候会加 ‘/’ 有时候不加,以’/'开头的会被当作根路径，就不会一直嵌套之前的路径。