路由概述

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 内。

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

  • 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
Logo

前往低代码交流专区

更多推荐