Vue--- vue-Router 路由

時間 2020-06-17

原文原文鏈接

文檔 https://router.vuejs.org/zh-cncss

npm install vue-router --savehtml

調用vue

import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter)

View Code

流程ajax

a. views目錄內組件vue-router

b. router目錄映射路由index.js (路徑與a中組件)npm

c. main.js 對象屬性router編程

d. 標籤router-link / router-viewbootstrap

建立路由表 /router/index.js 進行配置 path 路徑的走向（須要指揮的組件所有導入，啓用路由）

/* 路由器模塊 */ import Vue from 'vue' import VueRouter from 'vue-router' import About from '../views/About.vue' import Home from '../views/Home.vue' import News from '../views/News.vue' import Message from '../views/Message.vue' import MessageDetail from '../views/MessageDetail.vue' Vue.use(VueRouter) export default new VueRouter({ // 至關於一個路由表 指向不一樣的路徑顯示不一樣的組件 routes: [ { path: '/about', component: About }, { path: '/home', component: Home, children:[ { path:'/home/news', component:News }, { path:'message', component:Message, children: [ { path:'detail/:id', component: MessageDetail } ] }, { path:"", redirect:'/home/message' } ] }, { path: '/', redirect: '/about' } ] })

View Code

main.js 中導入　　

import Vue from 'vue' import App from './App.vue' import router from './router' //1.導入 new Vue({ el:'#app', components:{App}, template:'<App/>', router //2.註冊 });

View Code

默認仍是App.vue爲首頁組件

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Test</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由連接-->
          <router-link to="/about" class="list-group-item">Abount</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--顯示當前組件-->
            <!-- keep-alive保持活着(緩存路由組件/緩存路由對象）不會某一個死亡 -->
            <keep-alive>
              <router-view msg="abc"></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script> export default {}; </script>

<style type="text/css">

</st

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Test</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由連接-->
          <router-link to="/about" class="list-group-item">Abount</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--顯示當前組件-->
            <!-- keep-alive保持活着(緩存路由組件/緩存路由對象）不會某一個死亡 -->
            <keep-alive>
              <router-view msg="abc"></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script> export default {}; </script>

<style type="text/css">

</style>

View Code

1.基本路由

index.html

routeview 標籤選中自帶class .router-link-active ，定義樣式數組

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <title>vue_demo</title>

    <style> .router-link-active { color: red !important; } </style>

  </head>

  <body>
    <div id="app">

    </div> <!--app -->
  </body>

</html>

View Code

views/About.vue

與路由相關組件放置與views目錄下緩存

<template>
<div>about</div>
</template>

<script> export default { } </script>

<style>

</style>

View Code

views/Home.vue

<template>
<div>home</div>
</template>

<script> export default { } </script>

<style>

</style>

View Code

router/index.js

綁定path與對應views下的組件

使用redirect 跳轉默認頁

/**
 * Created by infaa on 2018/9/21. */
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue' Vue.use(VueRouter) export default new VueRouter({ routes: [ { path: '/about', component: About }, { path: '/home', component: Home }, { path: '/', redirect: '/about' } ] })

View Code

app.js

使用router 方法，利用router-link to=''xxx「區分，router-view 自動匹配到views下的組件

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Basic - 01</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
              <router-view></router-view>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script> export default { } </script>

<style>

</style>

View Code

main.js 須要註冊router

/**
 * Created by infaa on 2018/9/19. */
import Vue from 'vue'
import App from './App'
import router2 from './router'

/* eslint-disable no-new */ new Vue({ el: '#app', components: {App}, template: '<App/>', router: router2 })

View Code

2. 嵌套路由

頁面內子頁面含有須要路由頁面（子標籤頁等）

註冊路由時，使用children ：[] ,注意path: '/home/message/detail' 絕對路徑形式或者 path:'detail'

代碼略

3. 緩存路由組件

路由組件切換時死亡，切換回來時從新建立。

來回切換時內容消失

調試時發現切換後消失，只有about home之一

緩存對router-view使用keepalive標籤

app.uve

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Basic - 01</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <keep-alive>
                    <router-view></router-view>
            </keep-alive>


          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script> export default { } </script>

<style>

</style>

View Code

切換後input內容不消失。

路由組件不重建

4. url參數傳遞

Vue路由控制檯中獲取vue數據的兩種方式：1.params 2.query

路由表定義 children:[ path:'detail/:id' ]

path: '/home/msssage/:urlid'

傳遞router-link to="`/home/message/${message.id}`"

routerview的id {{route.params.id}}

routerview的內容

const id = this.$route.params.id*1 (*1 轉化爲num)

//若是獲取到的id === ajax異步請求的id 那麼就賦值給到顯示的數組messages中

this.msgDetail = this.allMSG.find(detail => detail.id ===id)

難點：mounted 鉤子函數每次只會執行一次因此得加watch 監視數據發生變化

有人沒懂《這個Vue控制檯（route）中怎麼就$route->params->不是empty了》

　　解釋：就是由於<router-link :to:"`/home/message/detail/${message.id}`" ></router-link> ，傳入了變更的id值，你能夠寫一個固定的值測試一下

<template>
  <div>
    <p>ID:{{$route.params.id}}</p>
    <ul>
      <li>id:{{messageDetail.id}}</li>
      <li>title:{{messageDetail.title}}</li>
      <li>content:{{messageDetail.content}}</li>
    </ul>
  </div>
</template>

<script> export default { data () { return { messageDetail: {} } }, mounted () { setTimeout(() => { const allMessageDetails = [ { id: 1, title: 'massage001', content: 'message001 content' }, { id: 2, title: 'massage002', content: 'message002 content' }, { id: 3, title: 'massage003', content: 'message003 content' }, { id: 4, title: 'massage004', content: 'message004 content' } ] this.allMessageDetail = allMessageDetails const id = this.$route.params.id * 1 this.messageDetail = allMessageDetails.find(detail => detail.id === id) }, 1000) }, watch: { $route: function (value) { // 路由路徑變化param const id = value.params.id * 1 this.messageDetail = this.allMessageDetail.find(detail => detail.id === id) } } } </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

View Code

5. router-view 參數傳遞

router-view msg="abc"

經過props

6. 編程式路由導航

影響返回前進

this.$router.push

this.$router.replace

<template>
  <div>
    <ul>
      <li v-for="message in messages" :key="message.id">
        <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
        <button @click="pushShow(message.id)">push查看</button>
        <button @click="replaceShow(message.id)">replace查看</button>
      </li>
    </ul>
    <button @click="$router.back()">回退</button>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script> export default { data () { return { messages: [] } }, mounted () { // 模擬ajax請求從後臺獲取數據 setTimeout(() => { const messages = [ { id: 1, title: 'massage001', content: 'message001 content' }, { id: 2, title: 'massage002', content: 'message002 content' }, { id: 3, title: 'massage003', content: 'message003 content' }, { id: 4, title: 'massage004', content: 'message004 content' } ] this.messages = messages }, 1000) }, methods: { pushShow (id) { this.$router.push(`/home/message/detail/${id}`) }, replaceShow (id) { this.$router.replace(`/home/message/detail/${id}`) } } } </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>