(二)在vue中設定預設的路由以及設定重定向
阿新 • • 發佈:2019-02-14
在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>