vue-rooter基础篇

路由概述

vue-rooter 是 vue.js 官方的路由插件，他和 vue.js 是深度集成的。适用于构建单页面。vue 的单页面应用是基于路由和组件的，路由是用于设定访问路径，并将路径和组件映射起来。在 vue-rooter 单页面应用中，是路径之间的切换，也就是组件的切换。

路由的使用

1.使用 router-link 标签进行导航，to 属性表示指定的链接，rooter-link标签会被渲染成 a 标签。路由匹配的组件在 router-view 中渲染出来。

router-link

• to： to 属性相当于 a 标签中的 href 属性，后面跟跳转链接
• replace： replace 在 router-link 标签中添加后，页面切换时不会留下历史记录

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

• tag：具有 tag 属性的 router-link 会被渲染成相应的标签

<router-link :to="/home" tag="p">Home</router-link>
<!-- 渲染结果 -->
<p>Home</p>

• active-class：这个属性是设置激活链接时 class 属性，也就是当前页面和所有与当前地址匹配的链接都会被添加 class 属性

<router-link :to="/home" active-class="active">Home</router-link>

• exact：开启 router-link 的严格模式

<router-link :to="/" exact>home</router-link>

HTML：
<router-link to="/one">路由</router-link>
<router-view></router-view>

router.js：定义路由：
  routes: [
 	 {
  　　	path: '/one',
  　　	name: 'one',
  　　	component: one
 	 }
  ]

main.js: 在main.js中需要通过router配置参数注入路由
　　new Vue({
　　el: '#app',
　　// 注入路由
　　router,
　　components: { App },
　　template: '<App/>'
　　})

2.动态路由：能够传递参数的路由模式，由于能够传递参数，所以对应的路由数量是不确定的，因此叫做动态路由。

传递方法：
在参数名前加上" : "，然后将参数写在路由的 path 内。

路由的传参有 params 、 query 、和直接在路由地址后面拼接参数三种形式：

• 1.params 方式

this.$router.push({
    name: '	detail',
    params: {
       id: id
    }
 })

对应的路由配置

{
     path: '/detail',
     name: 'Detail',
     component: Detail
 }

子组件获取参数

this.$route.params.id

• 2.query 方式

this.$router.push({
      path: '/detail',
      query: {
         id: id
      }
 })

对应的路由配置

{
     path: '/detail',
     name: 'Detail',
     component: Detail
 }

子组件获取参数

this.$route.query.id

• 3.直接在路由地址后面拼接参数方式

this.$router.push({
      path: `/detail/${id}`,
})

对应的路由配置

{
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
}

子组件获取参数

this.$route.params.id