vue vue router 基本使用

liaohui5發表於2019-03-06

Vue

官方教程: https://cn.vuejs.org/v2/guide/

vue-route

由於這不是vue必須的,但是在使用前需要先安裝vue 並且在使用前必須引入vue.js因為vue-router是依賴vue.js的

安裝

npm install vue vue-router --save

路由

什麼是路由?

訪問不同的路徑,就可以返回不同的結果

使用路由 vue-router

由於vue-router是基於vue的所以在使用前必須行引入vue

<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入vue-router.js之前必須引入vue.js -->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
複製程式碼

基本路由

// 例項化vue-router
let vueRouter = new VueRouter({
    routes: [
        {path: "/home", component: home},
        {path: "/list", component: list},
    ],
});

// 關聯到vue例項中使用router屬性
const vm = new Vue({
    el: '#app',
    router: vueRouter,
});
複製程式碼

在模板中使用 <router-view></router-view> 這個全域性元件即可這個元件能夠根據 VueRouter 例項中的的routes自動顯示或隱藏相應的元件

<div id="app">
    <router-view></router-view>
</div>
複製程式碼

路由模式 mode

hash(default)
history.pushStatus('','','path');

如果想在頁面中使用 a標籤 來訪問不同的路由可以設定則可以設定路由模式 mode 的值為 history,使用 <router-link> 這個全域性元件

const vueRouter = new VueRouter({
    routes: [
        {path: "/home", component: home},
        {path: "/list", component: list},
    ],
    mode: 'history',
});
複製程式碼

在模板中使用 <router-link></router-link> 元件

<div id="app">
    <router-link to="/home">去首頁</router-link>
    <router-link to="/list">去列表頁</router-link>
</div>
複製程式碼

注:使用 <router-link></router-link> 元件是必須加上 to 屬性,to 的值是 vueRouter 例項中 routes 配置的路由項點選哪個就會顯示路由對應的元件

預設路由

const vueRouter = new VueRouter({
    routes: [
        {path: "", component: home}, // a預設路由
        {path: "/home", component: home},
        {path: "/list", component: list},
        {path: "/*", redirect: '/home'} // b預設路由
        // redirect 是重定向
    ],
    mode: 'history',
});
複製程式碼

a預設路由: 沒有任何路由時候,顯示這個路由對應的元件

b預設路由: 沒有匹配到任何路由時,顯示這個路由對應的元件

注: 因為路由匹配順序的原因,這a必須第一個 b必須在 最後一個 在需要匹配 404 時建議使用這種方式

設定路由連線的樣式
- 設定路由標籤(預設a標籤)
- 設定當前路由樣式

<!-- 設定路由標籤(預設`a標籤`) -->
<div id="app">
    <router-link to="/home" tag="button">去首頁</router-link>
    <router-link to="/list" tag="a">列表頁</router-link>
    <router-view></router-view>
</div>
複製程式碼

<!--設定活動路由樣式-->
<style>
    .active {
        color: #ff0000;
    }
</style>

<script >
 const vueRouter = new VueRouter({
    routes: [
        {path: "", component: home},
        {path: "/home", component: home},
        {path: "/list", component: list},
    ],
    mode: 'history',
    // 預設的活動路由類名叫: router-link-active
    linkActiveClass: 'active',
});
</script>
複製程式碼

程式設計式路由

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue For Vue-Router</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .home, .list{
            height: 300px;
            color: #ffffff;
        }
        .home{ background: #000; }
        .list{ background: #cccccc; }
    </style>
</head>
<body>

<div id="app">
    <router-link :to="{path:'/home'}"></router-link>
    <router-link :to="{path:'/list'}"></router-link>
    <router-view></router-view>
</div>

<!--template-->
<script>
    // make a vue template
    let home = Vue.extend({
        template: "<div class='home'>home首頁 <button @click='toList'>去列表頁</button></div>",
        methods:{
            toList(){
                this.$router.push('/list');
            },
        }
    });

    let list = Vue.extend({
        template: '<div class="list">list列表頁 <button @click="toIndex">去首頁</button></div>',
        methods:{
            toIndex() {
                this.$router.go(-1);
            },
        },
    });

    // vue-route===================
    const vueRouter = new VueRouter({
        routes: [
            {path: "", component: home},
            {path: "/home", component: home},
            {path: "/list", component: list},
        ],
    });

    // vue========================
    const vm = new Vue({
        el: '#app',
        router: vueRouter,
        /**
         * 只要vue類例項掛載了router屬性就會生成
         * $router屬性(放方法)  和  $route屬性(放屬性)
         * 可以通過 this.$router/$route 來獲得
         */
    });
</script>
</body>
</html>
複製程式碼

路由巢狀

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue vue-router study</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!--css-->
    <style>
        .template {
            line-height: 100px;
            color: #ffff00;
            text-align: center;
        }

        .template h1 {
            font-size: 30px;
        }

        .list {
            background: #cccccc;
        }

        .home {
            background: #000;
        }

        .detail {
            background: #00f;
        }
    </style>
</head>
<body>
<!--
    1.首頁 <-> 列表頁   一級路由
    2. 列表頁 -> 詳情頁 二級路由
    想實現一級路由,在實現二級路由
-->

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

<!-- templates -->
<template id="list">
    <div class="template list">
        <h1>
            這是list列表頁
            <button @click="toIndex">去首頁</button>
            <router-link to="/list/detail" tag="button">詳情頁</router-link>
        </h1>
        <!-- 二級路由 -->
        <router-view></router-view>
    </div>
</template>

<!-- javascript -->
<script>
    // components
    let home = Vue.extend({
        template: `<div class="template home"><h1>這是Index首頁 <button @click="toList">去列表頁</button></h1></div>`,
        methods: {
            toList() {
                this.$router.push('/list')
            },
        }
    });

    let list = Vue.extend({
        template: '#list',
        methods: {
            toIndex() {
                this.$router.push('/home')
            },
        }
    });

    let detail = Vue.extend({
        template: `<div class="template detail"><h1>這是詳情頁</h1></div>`,
    });

    let vueRouter = new VueRouter({
        routes: [
            {path: '', component: home},
            {path: '/home', component: home},
            {
                path: '/list', component: list,
                children: [{path: 'detail', component: detail,}],
            },
            {path: '*', redirect:'/home'},
        ],
    });
    const vm = new Vue({
        el: '#app',
        router: vueRouter,
    });
</script>

<!--
多級路由巢狀,先設定好一級路由,然後在一級路由的模板中設定子路由

<template id="list">
    <div class="template list">
        <h1>
            這是list列表頁<button @click="toIndex">去首頁</button>
            <router-link to="/list/detail" tag="button">詳情頁</router-link>
        </h1>
        <router-view></router-view>
      </div>
</template>
-->
</body>
</html>
複製程式碼

路由(路徑)引數

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue vue-router study</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<!-- app -->
<div id="app">
    <!-- 這裡的show,test,three是路由的第二個引數 -->
    <router-link to="/article/1/show">第一篇文章</router-link>
    <router-link to="/article/2/test">第二篇文章</router-link>
    <!--<router-link to="/article/3/three">第三篇文章</router-link>-->
    <!--
        除了以上這種寫法,還可以用物件作為 to 的值,
        如果用物件作為 to 的值,那麼必須動態的繫結to屬性(:to 或者 v-bind:to)
        並且使用引數,但是這種方式必須給路由起個名字,
        此時這個路由就不能再通過path跳轉,必須通過路由名字
    -->
    <router-link :to="{name:'articles',params:{articleId:3, other:'three'}}">第三篇文章</router-link>
    <router-view></router-view>
</div>

<!-- javascript -->
<script>
    let article = Vue.extend({
        // 這裡的 articleId 是配置 vueRouter這個例項的 routes屬性時配置的引數 :articleId
        template: `<div>這是第 {{$route.params.articleId}} 片文章</div>`,
        // 如果要根據路徑引數的變化來進行相應的操作,可以監控引數的變化來進行對應的操作
        watch: {
            $route(){
                alert("路徑引數改變了.");
            }
        }
    });

    let vueRouter = new VueRouter({
        routes: [
            // 路徑引數,表示值必須要有,但是值是動態的
            {path: '/article/:articleId/:other', component: article, name: 'articles'}
            // 設定的路由: /article/:articleId/:other
            // 訪問的路由: /article/1/test
            // 最終會生成一個物件儲存到 $route 屬性中:  {articleId:'1',  other: 'test'}
            // 所以在取值是可以使用:  this.$route.articleId 來取出路由傳遞的引數
        ],
    });

    const vm = new Vue({
        el: '#app',
        router: vueRouter,
    });
</script>
</body>
</html>
複製程式碼

路由切換動畫

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue vue-router 路由切換動畫</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .test {
            line-height: 50px;
            background: #000;
            color: skyblue;
            padding: 5px 15px;
        }
        .fadeIn {
            animation: fadeIn 1s ease-out forwards;
        }
        @-webkit-keyframes fadeIn{
            0%{ opacity: 0; }
            50%{ opacity: 0.5; }
            100%{ opacity: 1; }
        }

        .fadeOut {
            animation: fadeOut 1s ease-out forwards;
        }
        @-webkit-keyframes fadeOut{
            0%{ opacity: 1; }
            50%{ opacity: 0.5; }
            100%{ opacity: 0; }
        }
    </style>
</head>
<body>
<!-- app -->
<div id="app">
    <router-link to="/home">去首頁頁</router-link>
    <router-link to="/list">去列表頁</router-link>
    <!--
        mode: 動畫執行的模式, 預設兩個動畫時並行的
        in-out: 先進後出
        out-in: 先出後進
    -->
    <transition enter-active-class="fadeIn" leave-active-class="fadeOut" mode="out-in">
        <keep-alive>
        <router-view></router-view>
        </keep-alive>
    </transition>
    <!--
        頻繁的切換元件是不停的銷燬元件,建立元件,所以為了效能,需要使用
        <keep-alive></keep-alive> 這個全域性元件類快取元件
        要快取哪個元件就使用使用keep-alive 把那個元件包起來
    -->
</div>

<!-- javascript -->
<script>
    let home = Vue.extend({
        template: `<div><p class="test">home首頁</p></div>`,
    });
    let list = Vue.extend({
        template: `<div><p class="test">list列表頁</p></div>`,
    });

    let vueRouter = new VueRouter({
        routes: [
            {path: '', component: home},
            {path: '/home', component: home},
            {path: '/list', component: list},
        ],
    });

    const vm = new Vue({
        el: '#app',
        router: vueRouter,
    });
</script>
</body>
</html>
複製程式碼

【VUE】vue-router的基本用法
2018-07-13
Vue
vue3+TypeScript+vue-router使用
2022-01-04
VueTypeScript
5分鐘瞭解vue-router的基本使用
2019-05-03
Vue
vue 路由vue Router
2020-12-28
Vue路由
vue-router的使用
2020-10-27
Vue
Vue-router外掛使用
2020-11-21
Vue
vue升級之路（三）-- vue-router的使用
2018-08-14
Vue
vue-router 在模組化 vue中的使用
2017-04-02
Vue
使用webpack建立vue專案，安裝vue-router和不安裝vue-router的區別
2017-07-04
WebVue
Vue-Router的使用方法
2018-11-08
Vue
Vue-router的使用姿勢
2018-07-27
Vue
vue-Router中name的使用
2020-10-14
Vue
實現自己的Vue Router -- Vue Router原理解析
2020-01-20
Vue
vue-router的基本框架及寫法，router-view與router-link
2020-10-25
Vue框架View
Vue2.0三——Vue-router
2017-12-06
Vue
vue · 使用vue-router設定每個頁面的title
2019-01-25
Vue
vue路由例項（vue-router）（vue版本2.9.2）
2017-12-14
Vue路由
vue-router教程
2021-09-09
Vue
vue之router-view元件的使用
2018-04-26
VueView元件
vue+vue-router+vuex地址管理思路
2019-03-04
Vue
vue實踐02之vue-router
2019-02-17
Vue
vue全家桶 ---vue-router路由篇
2018-12-29
Vue路由
vue 快速入門系列 —— vue-router
2021-10-09
Vue
vue專案實踐（vuex + vue-router + vue-resource）
2016-08-29
Vue
【vue-系列】vue-router原始碼分析
2019-12-03
Vue原始碼
Vue+Vue-router+Vuex專案實戰
2019-03-19
Vue
requirejs vue vue.router簡單框架
2021-09-09
UIJSVue框架
Vue番外篇 -- vue-router淺析原理
2018-10-18
Vue
一起學Vue：路由(vue-router)
2020-11-01
Vue路由
vue--vue-router 元件對映到路由
2022-02-28
Vue元件路由
vue 2 + vue-router 2 實現SPA
2017-01-11
Vue
說說如何使用 vue-router 外掛
2019-04-05
Vue
Vue Router詳細教程
2020-07-31
Vue
vue-router筆記
2021-09-09
Vue筆記
認識vue-router
2018-08-31
Vue
vue router 許可權
2018-12-17
Vue
七. Vue Router詳解
2020-12-05
Vue
vue-router原理剖析
2018-05-26
Vue

vue vue router 基本使用

vue-route

安裝

路由

基本路由

路由模式 mode

程式設計式路由

路由巢狀

路由(路徑)引數

路由切換動畫

相關文章