在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的值
}
在官网中的详细描述重定向:点击打开链接
在上面的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>
原文地址:https://blog.csdn.net/tangxiujiang
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。