路由 vue-router 基本使用

$route 和 $router 的區別
$router 爲VueRouter 實例,想要導航到不同的URL,則使用 $router.push方法
$route 爲當前 router跳轉對象裏面可以獲取 name、path、query、params等

01) 基本目錄結構

02) src/router/index.js 路由文件

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../views/Home.vue');
const Login = () => import('../views/Login.vue');

// 01)安裝 VueRouter
Vue.use(VueRouter);

// 02)配置路由信息
const routes = [
    {path: '/', component: Home, meta: {title: '首頁'}},
    {path: '/home', component: Home, meta: {title: 'home首頁'}},
    {path: '/login', component: Login, meta: {title: 'login頁面'}},
];

// 03)創建路由對象
const router = new VueRouter({
    mode: 'history',
    routes
});

//04) 導出
export default router;

03) src/main.js 加載路由

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

 04) src/App.vue 渲染路徑匹配到的視圖

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name: 'app'
  }
</script>

 05-01) src/views/Home.vue 視圖文件

<template>
    <div id="home">
        <div>我是home</div>
        <router-link :to="{path: '/login'}">login</router-link> &nbsp;
        <router-link :to="{path: '/login'}" tag="button">
            tag屬性,我是自定義標籤
        </router-link> &nbsp;
    </div>

</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

 05-02) src/views/Login.vue 視圖文件

<template>
    <div id="login">
        <div>我是login</div>
        <router-link :to="{ path: '/home' }">home</router-link>
    </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

 

全局導航守衛處理元數據meta

// src/router/index.js 文件中

// 全局導航守衛
router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
    next();
});

// 在組件中獲取meta數據信息
<div> {{ $route.meta.title}} </div>

 

其他

vue-router官網