Day20-<router-link> 建立路由连结

前几天使用的router-link功能主要是产生超连结最基础的方式，但其实他有很多变化方式。

to属性

to的属性其实是在Vue router中执行了router.push这个方法，他会在history增加一个新的纪录，所以按下返回时可以从记录中抓取并回到上一页。

除了纯文字还有以下形式:

<!-- 与 v-bind 绑定，省略 path --> 
<router-link :to="'/home'">Home</router-link> 

<!-- 指定 path，作用与前面一样 --> 
<router-link :to="{ path: '/home' }">Home</router-link> 

<!-- 搭配具名路由 --> 
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link> 

<!-- 搭配 query 参数, 编译後的结果会出现在 queryString: `/register?plan=private` --> 
<router-link :to="{ path: '/register', query: { plan: 'private' }}"> Register </router-link>

replace属性

他不像to有在history留下纪录，而是执行router.replace替换当前的history纪录，因此没有上下页切换功能。

<router-link to="/home" replace>Home</router-link>

当前页的active样式

过去要去操控active class样式时，要看url是否符合连结并下判断

<template> 
	<ul> 
		<li><a :class="{ 'active': location.pathname === '/' }" href="/">Home</a></li> 
		<li><a :class="{ 'active': location.pathname === '/list' }" href="/list">List</a></li> 
		<li><a :class="{ 'active': location.pathname === '/about' }" href="/about">About</a></li> 
	</ul> 
</template>

当完全符合的话可以加上exact属性，此时的预设样式会改为router-link-exact-active

 <router-link to="/">Home</router-link> 

<!-- 选染後的画面 -->
<a href="/list" class="router-link-active router-link-exact-active">Home</a>

如果路由符合，会套用router-link-active样式，所在的位置为list/123就不会出现exact-active-class

<router-link to="/list">List</router-link>

<!-- 选染後的画面 -->
<a href="/list" class="router-link-active">List</a>

router-link与v-slot

router-link也有提供一个slot功能，透过一些属性的设定可以替还原本的结构。

<router-link
  to="/about"
  custom
  v-slot="{ href, route, navigate, isActive, isExactActive }">
  <NavLink :active="isActive" :href="href" @click="navigate">
		{{ route.fullPath }}
	</NavLink>
</router-link>

href给a标签使用
route 传入物件
navigate 触法路由事件函式，必要时阻止事件执行
isActive 回传目前路由是否与url目标相符合(Boolean)，可以取代预设的router-link-active
isExactActive 回传路由正规是否完全符合(Boolean)，可以取代预设的router-link-exact-active

举例，若希望router-link渲染出button的话...

<router-link to="/about" custom v-slot="{ navigate }"> 
	<button @click="navigate" role="link">About Us</button> 
</router-link>

<!--结果-->
<button role="link">About Us</button>

若 <a> 标签有使用 target="_blank"，则 navigate 会被忽略。

透过程序导页

前面提到的to和replace可以用router.push和router.replace操作网站的路由

// 透过字串指定 URL 
router.push('/users/eduardo') 

// 透过物件与 path 指定 
router.push({ path: '/users/eduardo' }) 

// 与具名路由、params 搭配 
router.push({ name: 'user', params: { username: 'eduardo' } }) 

// 以 query 指定目标的 query string 
router.push({ path: '/register', query: { plan: 'private' } }) 

// 搭配 hash, 执行後的结果为 /about#team 
router.push({ path: '/about', hash: '#team' })