（二）在vue中设置默认的路由以及设置重定向

Dear 丶 2022-05-26 10:38 1355阅读 0赞

在vue中设置默认的路由，即一进入页面就显示其中一个路由的内容，也就是设定重定向。

如下是设置默认路由的代码，即router文件夹下的index.js的内容：

import Vue from 'vue';
    import Router from 'vue-router';
    import seller from '@/componentsllerller';
    import ratings from '@/components/ratings/ratings';
    import goods from '@/components/goods/goods';
    
    Vue.use(Router);
    
    const routes = [{
      path:'/',           //这个表示的是根目录，即一进入的页面
      redirect:'goods'    //设置页面一进来就显示的页面，即重定向到goods组件，这里写的内容是对应组将的component的值
    },{
      path:'/goods',
      component:goods
    },{
      path:'/ratings',
      component:ratings
    },{
      path:'ller',
      component:seller
    }];
    
    export default new Router({
      linkActiveClass:'active',//当路由被选中的时候，会为选中的路由增加一个属性linkActiveClass其默认值为'router-link-active'
      routes                    //在这里是将好是将上面的那个默认值修改为active，这样就可以在App.vue中调用这个属性
    })

上面设置的默认路由是：goods组件，即定义一条路由规则：

{
      path:'/',           //这个表示的是根目录，即一进入的页面
      redirect:'goods'    //设置页面一进来就显示的页面，即重定向到goods组件，redirect对应的值是其中一条路由component的值
    }

在官网中的详细描述重定向：[点击打开链接][Link 1]

在上面的export中有定义属性linkActiveClass的值为'active'，默认为router-link-active，即某条路由被选中的时候自动加上这个样式属性，在App.vue中可以设置这个属性的值，如下面代码：

<template>
      <div id="app">
        <v-header><-header>
        <div class="tab">
          <div class="tab-item">
            <router-link to="/goods">商品</router-link>
          </div>
          <div class="tab-item">
            <router-link to="/ratings">评论</router-link>
          </div>
          <div class="tab-item">
            <router-link to="ller">商家</router-link>
          </div>
        </div>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
      import header from './components/header/header.vue';
      export default {
        name: 'App',
        components:{
          'v-header':header
        }
      }
    </script>
    
    <style lang="stylus">
      #app
        .tab
          display:flex
          width:100%
          height:40px
          line-height:40px
          .tab-item
            flex:1
            text-align:center
            & > a             //router-link会被渲染成<a>标签
              display :block  //使子元素充满整个父元素
              font-size:14px
              color:rgb(77,85,93)
              &.active        //当某条路由被选中的时候，给其linkActiveClass设置的值active样式
                color:rgb(240,20,20)
    </style>

[Link 1]: https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html