12.vue-router相关API（1）router-link和router-view
官网链接：https://router.vuejs.org/zh/api
<router-link>：
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
to：
表示目标路由的链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.router-link Props to</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<router-link to="/home">Home</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const router = new VueRouter({})
const app = new Vue({
router: router,
data(){
return {
msg: 'to'
}
},
}).$mount('#app');
</script>
</body>
</html>
可以看出，vue地router，是类似一种处理id的方式进行页面的显示。
replace：
设置 replace 属性的话，当点击时，导航后不会留下 history 记录。改部分代码如下：
<router-link to="/home" replace>Home</router-link>
append：
设置 append 属性后，则在当前 (相对) 路径前添加基路径。改部分代码如下：
<router-link to="home" append>Home</router-link>
tag：
有时候想要 <router-link> 渲染成某种标签，例如 <li>。 可以使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。改部分代码如下：
<router-link to="/home" tag="home">Home</router-link>
active-class：
设置链接激活时使用的 CSS 类名。默认值: "router-link-active"。改部分代码如下（只是突出演示）：
<router-link to="/home" active-class="激活">Home</router-link>
exact：
“是否激活”默认类名的依据是包含匹配。如下，是被激活的。
改部分代码如下：
<router-link to="/home" exact>Home</router-link>
现在不激活了。
event：
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。改部分代码如下：
<router-link to="/home" event='dblclick'>Home</router-link>
要双击才能激活了，点击一下已经不能激活了。
exact-active-class：
配置当链接被精确匹配的时候应该激活的 class。默认值是"router-link-exact-active"。
改部分代码如下：
<router-link to="/home" exact-active-class='激活的 class'>Home</router-link>
aria-current-value：
当链接根据精确匹配规则激活时配置的 aria-current 的值，这个值应该是 ARIA 规范中允许的 aria-current 的值（'page' | 'step' | 'location' | 'date' | 'time'）。默认值是"page"。
改部分代码如下：
<router-link to="/home" aria-current-value='time'>Home</router-link>
<router-view>：
用于显示组件的视图。需要在VueRouter实例对象中匹配好对应的组件。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.router-link Props to</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<router-link to="/home">Home</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const router = new VueRouter({
routes: [
{
path: '/home',
component: {
template: '<div>匹配 home 路径的组件</div>',
}
}
],
})
const app = new Vue({
router: router,
data(){
return {
msg: 'to'
}
},
}).$mount('#app');
</script>
</body>
</html>
name：
如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。部分代码改成如下：
html：
<router-view name='home'></router-view>
js：
const router = new VueRouter({
routes: [
{
path: '/home',
components: {
default: {
template: '<div>默认的组件</div>',
},
home: {
template: '<div>匹配 home 路径的组件</div>',
},
test: {
template: '<div>test 路径的组件</div>',
}
}
}
]
})
本文地址：https://blog.csdn.net/weixin_47870554/article/details/107297830