vue之vue-router嵌套路由

1、定义路由

vue之vue-router嵌套路由

  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、路由配置默认选中

vue之vue-router嵌套路由

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

    {
      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表单的组件，输入完成后切换到其它组件，回来后内容仍然存在

vue之vue-router嵌套路由

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

6、路由传参

6.1 定义路由

vue之vue-router嵌套路由

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}`)
          }
        },

编程式传参