Vue-Router基礎學習筆記

蔡萬勝發表於2018-10-14
Vue筆記

1、安裝vue-router

npm install vue-router
yarn add vue-router

2、引入註冊vue-router

import Vue from `vue`
import VueRouter from `vue-router`

Vue.use(VueRouter)

3、連結跳轉

<router-link to=`/home`></router-link>    //你可以在template中使用它實現一個可點選跳轉到home.vue的 a 標籤
this.$router.push(`/about`);    //在methods方法中跳轉到about頁面
this.$router.go(`-1`);    //在js中返回上一個頁面

4、經常用到

this.$route.params.name    //在js中獲取路由的引數
.router-link-active    //當前選中路由的匹配樣式
$route.query    //獲取查詢引數
$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是動態路徑引數
            component:`user`,
            children:[
                {
                    path:`userInfo`,    //www.xxx.com/user/cai/userInfo
                    component:`userInfo`    //子路由將渲染到父元件的router-view中
                },{
                    path:`posts`,
                    component:`posts`
                }
            ]
        }
    ]
})
Vue.use(Router);

6、路由引數方式變化時，重新發出請求並更新資料

//比如：使用者一切換到使用者二, 路由引數改變了，但元件是同一個，會被複用
// 從 /user/cai 切到 /user/wan

在User元件中：
//方法1：
    watch:{
        `$route`(to,from){
            //做點什麼，比如：更新資料
        }
    }
//方法二：
    beforeRouteUpdate(to,from,next){
        //同上
    }

7、程式設計式導航

router.push({name:`user`,params:{userId:`123`}})    //命名路由導航到user元件
<router-link :to=`{name:`user`,params:{userId:`123`}}`>使用者</router-link>

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

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

8、命名檢視

//當前元件中只有一個 router-view 時，子元件預設渲染到這裡

<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元件會渲染在name為main的router-view中
        }
    }
]
//巢狀命名檢視就是：子路由+命名檢視

9、重定向與別名

const router = new VueRouter({
    routes: [
        { path: `/a`, redirect: `/b` },
        { path: `/b`, redirect: { name: `foo` }},    //命名路由方式
        { path: `/c`, redirect: to => {    //動態返回重定向目標
          // 方法接收 目標路由 作為引數
          // return 重定向的 字串路徑/路徑物件
        }}
    ]
})

const router = new VueRouter({
    routes: [
        { path: `/a`, component: A, alias: `/b` }    //別名：當訪問 /b 時也會使用A元件
    ]
})

10、路由元件傳參

const User={
    props:[`id`],
    template:`<div>{{id}}</div>`
}
const router = new VueRouter({
    routes: [
        { path: `/user/:id`, component: User, props: true },
    
        // 對於包含命名檢視的路由，你必須分別為每個命名檢視新增 `props` 選項：
        {
            path: `/user/:id`,
            components: { default: User, sidebar: Sidebar },
            props: { default: true, sidebar: false }
        }
    ]
})

11、HTML5的History模式下服務端配置

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(`無法開啟index.htm頁面.`)
        }
        res.writeHead(200, {
          `Content-Type`: `text/html; charset=utf-8`
        })
        res.end(content)
      })
    }).listen(httpPort, () => {
      console.log(`開啟: http://localhost:%s`, httpPort)
    })
    
//使用了Node.js的Express
    [使用中介軟體][1]

相關文章