vue之vue-router嵌套路由

1、定义路由

  routes: [

    {
      path: ‘/product‘,  //第一层路由
      name: ‘product‘,
      component: Vproductcontent,//父组件渲染的是子组件的内容<routerview/>写在父组件中
      children:[
        {
          path: ‘/product/hotproduct‘, //第二层路由
          name: ‘hotproduct‘,
          component: Vhotproduct,
          children:[
            {
              path: ‘/product/hotproduct/detail/:id(\\d+)‘,  //第三层路由
              component: Vhotproductdetail,
            }
          ]
        },

      ]
    },

  ]

2、使用 router-link 组件来导航

在左侧菜单栏的Vleft组件中使用router-link

    <ul class="nav nav-sidebar">
      <router-link  tag="li" to="/product"><a href="#">产品管理</a></router-link>
    </ul>

2.1 加入默认样式

默认选中的样式是在li标签上加上class="active"

 #将其渲染成以下样式,这是默认选中的样式
  <ul class="nav nav-sidebar">
      <li class="active"><a href="#">产品管理</a></li>
    </ul>

2.1.1 tag

如果想要 <router-link> 渲染成某种标签,例如 <li>。 可以使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

    <ul class="nav nav-sidebar">
      <router-link  tag="li" to="/product"><a href="#">产品管理</a></router-link>
    </ul>

2.1.2 active-class

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。比如:li标签上渲染出class="active"

  • 可在 <router-link> 上使用 active-class 属性,指定渲染后生成其他类名
 <router-link  tag="li" to="/product" active-class=“active”><a href="#">产品管理</a></router-link>

但是这样需要没一个router-link上都需要加,可以使用全局配置,避免麻烦

  • 可以通过路由的构造选项 linkActiveClass 来全局配置
//在router文件夹下的index.js中配置

export default new Router({
  // 全局配置 router-link 标签生成的 CSS 类名
  linkActiveClass: ‘active‘,
  routes: [
  ]
})

2.1.3 exact

  如果完成上述配置后,会发现不管点击哪一个链接根路由(/)一直有高亮背景, 因为 /product都会去模糊匹配 / 和 /product, 所以 / 一直有高亮 ,可在router-link 标签上使用 exact 属性,针对根路由(/)开启精确匹配。

 <router-link  tag="li" to="/" exact><a href="#">首页</a></router-link>

此时就完成了点击哪个,哪个就会激活有背景色。

3、router-view渲染

这里注意每一层的路由最后渲染都应该渲染在它上一层录有对应的组件中,例如:

    {
      path: ‘/product‘,
      name: ‘product‘,
      component: Vproductcontent,
      children:[
        {
          path: ‘/product/hotproduct‘,
          name: ‘hotproduct‘,
          component: Vhotproduct,
         }     ]   }
children下的组件都应该渲染在Vproductcontent组件中,所以在Vproductcontent下写router-view的渲染出口。
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="header clearfix headeradd">
      <nav>
        <ul class="nav nav-pills">
          <router-link :to="{name:‘hotproduct‘}" tag="li">  //路由跳转连接
            <a>热销产品</a>
          </router-link>
        </ul>
      </nav>
      <hr>
    </div>

    <router-view></router-view> //渲染出口

  </div>

4、路由配置默认选中

此时只需要在路由中加入,点击产品管理,默认跳转到热销产品即可。

    {
      path: ‘/product‘,
      name: ‘product‘,
      component: Vproductcontent,//父组件渲染的是子组件的内容<routerview/>写在父组件中
      children:[
        {
          path: ‘/product/hotproduct‘,
          name: ‘hotproduct‘,
          component: Vhotproduct,
          children:[
            {
              path: ‘/product/hotproduct/detail/:id(\\d+)‘,
              component: Vhotproductdetail,
            }
          ]
        },

       //点击产品管理默认选中
        {
          path: ‘/product‘,
          redirect: ‘/product/hotproduct‘,
        }

5、keep-alive

<keep-alive>  可缓存渲染的路由组件实例,比如一个form表单的组件,输入完成后切换到其它组件,回来后内容仍然存在

    <!-- <keep-alive缓存form表单的输入数据 -->
    <keep-alive>
    <router-view></router-view>
    </keep-alive>

6、路由传参

6.1 定义路由

6.1.1 接收参数(变量占位符)

用于接收路由参数的,可用于接收不同类型

    //路由将匹配id是整型的,params后面可以跟正则
    { path: ‘/params-with-regex/:id(\\d+)‘ },

    // * 可以匹配任何东西
    { path: ‘/asterisk/*‘ },

    // params用冒号“:”表示
    {path : ‘ / params /:foo /:bar ‘ },

    //通过添加“?”可以使param成为可选项
    {path : ‘ / optional-params /:foo?‘ },

详情参考:https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js

6.2 传参

       <ul>
          <li v-for="(product, index) in hotProductArray" :key="product.id">
            <router-link :to="‘/product/hotproduct/detail/‘ + product.id">
              {{product.name}}
            </router-link>
          </li>
        </ul>

 <ul>
      <li v-for="(product, index) in hotProductArray" :key="product.id">
         <button @click="pushId(id)">  //相当于点击路由链接(后退1步,会返回当前路由界面)
              {{product.name}}
      </button>
          </li>
        </ul>    

//
        methods:{
          pushId(id){
            this.$router.push(`/product/hotproduct/detail/${id}`)
          }
        },

编程式传参

其余编程式路由API:

this.$router.push(path)      //相当于点击路由链接(后退1步,会返回当前路由界面)
this.$router.replace(path)  // 用新路由替换当前路由(后退1步,不可返回到当前路由界面)
this.$router.back()     //后退回上一个记录路由
this.$router.go(n)     // 参数 n 指定步数
this.$router.go(-1)    // 后退回上一个记录路由
this.$router.go(1)      //向前进下一个记录路由

6.3 获取对应id的对象

 methods:{
          getProductById(){
            this.id=this.$route.params.id-0 //注意:获取路径上的id,减0是为了变成整型,路径上的id是字符

            //获取指定的对象,防止页面刷新数据丢失,存在localStorage,先去这里取值,因为页面刷新,重新生成Vue实例,内存的数据丢失
            let detailProduct=  window.localStorage.getItem(‘detailProduct‘);
              if(!detailProduct) {
                this.detailProduct = this.$store.getters[‘pm/getHotProductById‘](this.id) //获取指定id的对象
              } else {
                window.localStorage.setItem(‘detailProduct‘, this.detailProduct)
              }

          }
      },

在创建这个组件时就应该获取id,否则页面刚开始会没有数据

      created(){
          //只会调用一次,创建时就会调用方法,获取id
          this.getProductById();

      },

点击不同的对象就应该监听路由变化,随时获取不同的id

      watch:{
          //监视路由变化,只要变化就会调用方法,重新获取id
          ‘$route‘:function () {
            this.getProductById()
          }
      }

id和对象初始化

data:function(){
         return {
           id:null,
           detailProduct:{}
         }
        },

渲染数据

  <div class="jumbotron">
    <h1>{{ id }}</h1>
    <h1>{{ detailProduct }}</h1>

  </div>

6.4 路由传参关系图

参考文档:https://router.vuejs.org/zh/

原文地址:https://www.cnblogs.com/shenjianping/p/11313410.html

时间: 2024-11-06 09:51:21

vue之vue-router嵌套路由的相关文章

六、Vue Router 嵌套路由

嵌套路由 在入口模板中设置的<router-view>是最顶层的出口.子组件中可以嵌套<router-view>为子路由匹配的出口. const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } 要在嵌套的出口中

vue中this.$router.push()路由传值和获取的两种常见方法

1.路由传值   this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的URL (2)当点击 <router-link> 时,这个方法会在内部调用,即点击 <router-link :to="..."> 等同于调用 router.push(...) a)      声明式:<router-link :to=&quo

Vue 嵌套路由、路由守卫

嵌套路由 嵌套路由:一个路由配置中嵌套其他的路由配置. 嵌套路由挺常用的,比如导航栏有首页.文章.想法.留言4个模块,我们以嵌套路由的形式集成这些模块,在导航栏中点击对应的条目,就会路由到对应的页面(下方显示对应的页面),和html的<iframe>效果差不多. demo   嵌套路由 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><

vue嵌套路由

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html,只有一个路由出口 1 <div id="app"> 2 <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> 3 <router-view></router-view> 4 </div> main.

vue 嵌套路由,router-link-active的问题

最近开发的过程中,遇到一个嵌套路由的问题,需求是这这样的, 首页三个路由   a    b    c 路由写法是 export default new Router({ routes: [ // { // path: '/', // component: '' // }, // { // path: '/history-grade', // component: '' // }, { path: '/source-setting', component: setting, children: [

Vue中使用children实现路由的嵌套

Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&

VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新dom后执行回调 二.$refs用法 1.ref作用于普通元素——得到dom节点 2.ref作用于子组件——得到组件实例,可使用组件所有方法 3.当v-for用于元素或组件的时候,refs将是包含dom节点或组件实例的数组(想得到单个的ref,只需循环即可) 三.vue组件hover事件模拟 1.m

vue 嵌套路由

在一个页面中如果想实现三个页面的拼接组成一个页面,这时候就用到嵌套路由了. 第一种方法: 1.顶部页面  /views/Home.vue <template> <el-container> <!-- 顶部 --> <el-header class="headerAll"> <div class="headImage"></div> <!-- <img src=""

vue router动态路由

<div id="#app"> <router-link to="/user/header">路由1</router-link> /*指向user组件*/ <router-link to="/user/footer">路由2</router-link> /*指向user组件*/ /*当我们点击路由1得时候*/ /*------当我们点击路由2得时候*/ <router-view&g

Vue router 全局路由守卫

记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from 'vue-router' import store from './../store' import Home from 'components/home/home' // 主页组件 // 其它组件... import Cart from 'components/cart/cart' // 购物车组