4-4.vue-router的router-link和router-view

4-4.vue-router的router-link和router-view

router-link的作用

支持用户在具有路由功能的应用中导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的a标签。

router-link属性的介绍

1.to属性

表示跳转的目标地址

代码展示

<template>
  <div id="nav">
    <!-- 1.字符串,相当于 <a href="Home"></a> -->
    <router-link to="Home1">Home1</router-link>
    <!-- 2.一样的，同上 -->
    <router-link :to="{ path: 'Home2' }">Home2</router-link>
    
    <!-- 3.有当前页面动态传入路径,有该组件传入值 -->
    <router-link :to="Home">Home3</router-link>
    
    <!-- 4.带参数,获取参数：this.$route.query.plan -->
    <router-link :to="{ path: 'Home4', query: {plan: 'private'} }">Home4</router-link>

    <!-- 5.命名路由,就是与后台的配置name保持一致，获取参数: $route.params.userId -->
    <router-link :to="{ name: 'Home5', params: { userId: 123 }}">Home5</router-link>

  </div>
  <router-view/>
</template>

<script>
  export default {
  name: 'App',
  data() {
    return {
      Home: 'Home3'
    }
  }
}
</script>

对应的配置页面

const routes = [
  {
    // 对应1，path对应to里面的值
    path: '/Home1',
    component: () => import(/* webpackChunkName: "about" */ '../views/Home1.vue')
  },
  {
    // 对应2对象里面path的值
    path: '/Home2',
    component: () => import(/* webpackChunkName: "about" */ '../views/Home2.vue')
  },
  {
    // 对应to后面Home实际的值
    path: '/Home3',
    component: () => import(/* webpackChunkName: "about" */ '../views/Home3.vue')
  },
  {
    // 对应4对象里面的path的值，其参数可以通过$route.query.plan获取
    path: '/Home4',
    component: () => import(/* webpackChunkName: "about" */ '../views/Home4.vue')
  },
  {
    // 对应5里面对象name里面的值，参数可以通过$route.params.userId获取
    path: '/Home5/:userId',
    name: 'Home5',
    component: () => import(/* webpackChunkName: "about" */ '../views/Home5.vue')
  }
]

2.tag属性

router-link默认是一个a标签，可以通过tag改变成按钮等，但是搞版本的cli已经移除该属性了

3.replace属性

该属性添加后，无法在浏览器上前进和后退

router-view的作用（很常用）

作用是渲染跳转的路径匹配到的组件。