Vue--- vue-Router 路由

時間  2019-11-13
標籤 vue router 路由 欄目 系統網絡 简体版
原文   原文鏈接

文檔 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

  1.  建立路由表   /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

 

  1. 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
  2. 默認仍是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>
View Code

 this.$router.back

 

## 注意route  當前組件

router 路由器   push replace  back方法

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程