【Vue】Re15 Router 第二部分

阿新 • • 發佈：2020-11-01

一、設定首頁重定向：

import Vue from 'vue';
import Router from 'vue-router';
import Home from "../components/Home";
import About from "../components/About";

Vue.use(Router);

const routerList = [
  /* 重定向首頁路由配置 */
  {
    path : '', /* 預設值預設指向 '/' */
    redirect : '/home',
  },
  {
    path : '/home', /* 為什麼這裡是path不是url？ 因為完整的url還包括 專案根url（協議頭 + 域名（或者IP地址） + 埠號 + 專案根名稱路徑（可選））   
*/
    name : 'home', /* 名字可以不加 */
    component : Home
  },
  {
    path : '/about',
    name : 'about',
    component : About
  },
]
const router = new Router({
  routes : routerList
});
export default router;

在訪問首頁時自動重定向跳轉到首頁元件

二、路由模式更改：

我們可以更改路由模式，預設使用的是hash，可以更改為history

import Vue from 'vue';
import Router from  
'vue-router';
import Home from "../components/Home";
import About from "../components/About";

Vue.use(Router);

const routerList = [
  /* 重定向首頁路由配置 */
  {
    path : '', /* 預設值預設指向 '/' */
    redirect : '/home',
  },
  {
    path : '/home', /* 為什麼這裡是path不是url？ 因為完整的url還包括 專案根url（協議頭 + 域名（或者IP地址） + 埠號 + 專案根名稱路徑（可選））   
*/
    name : 'home', /* 名字可以不加 */
    component : Home
  },
  {
    path : '/about',
    name : 'about',
    component : About
  },
]
const router = new Router({
  routes : routerList,
  mode : 'history'
});
export default router;

更改history之後，url將不再有#標識

三、Link元素補充

之前的案例只是使用了to一個屬性

<template>
  <div id="app">
    <router-link to="/home">去首頁</router-link>
    <router-link to="/about">去關於</router-link>
    <router-view></router-view>
  </div>
</template>

其他屬性

tag屬性

用來指定渲染之後的元素，預設是使用a元素

replace屬性

history記錄不再儲存，瀏覽器不可操作回退

但是實際設定之後並沒有起效。。。

<template>
  <div id="app">
    <router-link to="/home" tag="button" replace>去首頁</router-link>
    <router-link to="/about" tag="button" replace>去關於</router-link>
    <router-view></router-view>
  </div>
</template>

active-class屬性

link元素在路由匹配成功後自動設定一個router-link-active的class

可以設定改屬性，修改預設的值名稱：

這樣可以輕鬆的控制路由元素的樣式

或者在路由例項中配置修改【router/index.js】：

import Vue from 'vue';
import Router from 'vue-router';
import Home from "../components/Home";
import About from "../components/About";

Vue.use(Router);

const routerList = [
  /* 重定向首頁路由配置 */
  {
    path : '', /* 預設值預設指向 '/' */
    redirect : '/home',
  },
  {
    path : '/home', /* 為什麼這裡是path不是url？ 因為完整的url還包括 專案根url（協議頭 + 域名（或者IP地址） + 埠號 + 專案根名稱路徑（可選））  */
    name : 'home', /* 名字可以不加 */
    component : Home
  },
  {
    path : '/about',
    name : 'about',
    component : About
  },
]
const router = new Router({
  routes : routerList,
  mode : 'history',
  linkActiveClass : 'sss'
});
export default router;

這樣就是改變預設設定的了

四、使用JS程式碼方式實現路由

<template>
  <div id="app">
<!--    <router-link to="/home" tag="button" active-class="aaa" replace>去首頁</router-link>-->
<!--    <router-link to="/about" tag="button" replace>去關於</router-link>-->
    <button @click="toHome">首頁</button>
    <button @click="toAbout">關於</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods : {
    toHome () {
      this.$router.push('/home');
    },
    toAbout () {
      this.$router.push('/about');
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>