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