Vue-Router基礎學習筆記
阿新 • • 發佈:2018-11-11
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]
推薦文章: vue-router原始碼分析-整體流程
原文地址:https://segmentfault.com/a/1190000016679121