Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))

更新時(shí)間：2018年10月15日 11:14:29 作者：蔡萬(wàn)勝

這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

vue-router是一個(gè)插件包，要先用npm進(jìn)行安裝

1、安裝vue-router

npm install vue-router
yarn add vue-router

2、引入注冊(cè)vue-router

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

Vue.use(VueRouter)

3、鏈接跳轉(zhuǎn)

<router-link to='/home'></router-link>  //你可以在template中使用它實(shí)現(xiàn)一個(gè)可點(diǎn)擊跳轉(zhuǎn)到home.vue的 a 標(biāo)簽
this.$router.push('/about');  //在methods方法中跳轉(zhuǎn)到about頁(yè)面
this.$router.go('-1');  //在js中返回上一個(gè)頁(yè)面

4、經(jīng)常用到

this.$route.params.name  //在js中獲取路由的參數(shù)
.router-link-active  //當(dāng)前選中路由的匹配樣式
$route.query  //獲取查詢參數(shù)
$route.hash  //哈希

5、路由配置

export default new Router({
  routes:[
    {        //第一層是頂層路由，頂層路由中的router-view中顯示被router-link選中的子路由
      path:'/',
      name:'Home',
      component:'Home'
    },{
      path:'/user/:id',  //www.xxx.com/user/cai
      name:'user',  //:id是動(dòng)態(tài)路徑參數(shù)
      component:'user',
      children:[
        {
          path:'userInfo',  //www.xxx.com/user/cai/userInfo
          component:'userInfo'  //子路由將渲染到父組件的router-view中
        },{
          path:'posts',
          component:'posts'
        }
      ]
    }
  ]
})
Vue.use(Router);

6、路由參數(shù)方式變化時(shí)，重新發(fā)出請(qǐng)求并更新數(shù)據(jù)

//比如：用戶一切換到用戶二, 路由參數(shù)改變了，但組件是同一個(gè)，會(huì)被復(fù)用
// 從 /user/cai 切到 /user/wan

在User組件中：

//方法1：
  watch:{
    '$route'(to,from){
      //做點(diǎn)什么，比如：更新數(shù)據(jù)
    }
  }
//方法二：
  beforeRouteUpdate(to,from,next){
    //同上
  }

7、編程式導(dǎo)航

router.push({name:'user',params:{userId:'123'}})  //命名路由導(dǎo)航到user組件
<router-link :to='{name:'user',params:{userId:'123'}}'>用戶</router-link>

router.push({path:'register',query:{plan:'cai'}})  //query查詢參數(shù)
router.push({path:`/user/${userId}`})  //query

router.push(location,onComplete,onAbort)
router.replace()  //替換
router.go(-1)

8、命名視圖

//當(dāng)前組件中只有一個(gè) router-view 時(shí)，子組件默認(rèn)渲染到這里

<router-view class='default'></router-view>
<router-view class='a' name='left'></router-view>
<router-view class='b' name='main'></router-view>

routes:[
  {
    path:'/',
    components:{
      default:header,
      left:nav,
      main:content  //content組件會(huì)渲染在name為main的router-view中
    }
  }
]
//嵌套命名視圖就是：子路由+命名視圖

9、重定向與別名

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/b', redirect: { name: 'foo' }},  //命名路由方式
    { path: '/c', redirect: to => {  //動(dòng)態(tài)返回重定向目標(biāo)
     // 方法接收 目標(biāo)路由 作為參數(shù)
     // return 重定向的 字符串路徑/路徑對(duì)象
    }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }  //別名：當(dāng)訪問(wèn) /b 時(shí)也會(huì)使用A組件
  ]
})

10、路由組件傳參

const User={
  props:['id'],
  template:`<div>{{id}}</div>`
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },
  
    // 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

11、HTML5的History模式下服務(wù)端配置

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: 404}
  ]
})

后端配置：

//Nginx
  location / {
   try_files $uri $uri/ /index.html;
  }
  
//Apache
  <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
  </IfModule>
//Node.js
  const http = require('http')
  const fs = require('fs')
  const httpPort = 80
  http.createServer((req, res) => {
   fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
     console.log('無(wú)法打開(kāi)index.htm頁(yè)面.')
    }
    res.writeHead(200, {
     'Content-Type': 'text/html; charset=utf-8'
    })
    res.end(content)
   })
  }).listen(httpPort, () => {
   console.log('打開(kāi): http://localhost:%s', httpPort)
  })
  
//使用了Node.js的Express
  [使用中間件][1]

解耦合

 routes: [
  { path: '/user/:id', component: User, props: true },
 
 
  // 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)：
  {
   path: '/user/:id',
   components: { default: User, sidebar: Sidebar },
   props: { default: true, sidebar: false }
  }
 
 ]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: