1.典型組件模板
<template>
</template>
<script>
import store from '../vuex/store';
import nvHeader from '../components/header.vue';
import {isLogin, setUserInfo} from '../vuex/actions';
import {getLoginState, getUserInfo} from '../vuex/getters';
export default {
data : function(){
return {
strToken : ''
}
},
methods : {
login : function() {
},
components : {
'nv-header' : nvHeader
},
computed: {
a: function(){
return 1+3;
}
},
store : store,
vuex : {
actions : {
userLogin : isLogin,
setUserInfo : setUserInfo
},
getters : {
userLoginState : getLoginState,
getUserInfo : getUserInfo
}
}
}
</script>
<style lang="sass">
</style>
2.路由
<div id="app">
<p>
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/foo/profile">/user/foo/profile</router-link>
<router-link to="/user/foo/posts">/user/foo/posts</router-link>
</p>
<router-view></router-view>
</div>
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: UserHome },
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
{ path: 'profile', component: UserProfile },
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'posts', component: UserPosts }
]
}
]
})
Paste_Image.png
頁面跳轉
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
（同級）展示多個視圖，而不是嵌套展示，例如創建一個布局，有 sidebar（側導航） 和main（主內容） 兩個視圖，這個時候命名視圖就派上用場了
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<div id="app">
<h1>Named Views</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/other">/other</router-link></li>
</ul>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>
</div>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/',
// a single route can define multiple named components
// which will be rendered into <router-view>s with corresponding names.
components: {
default: Foo,
a: Bar,
b: Baz
}
},
{
path: '/other',
components: {
default: Baz,
a: Bar,
b: Foo
}
}
]
})
new Vue({
router,
el: '#app'
})
導航鉤子
（1）全局鉤子
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
每個鉤子方法接收三個參數：
**to: Route
**: 即將要進入的目標 路由對象
**from: Route
**: 當前導航正要離開的路由
**next: Function
**: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next
方法的調用參數。
**next()
**: 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 **confirmed**
（確認的）。
**next(false)
**: 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），
那么 URL 地址會重置到 from 路由對應的地址。
**next('/')
或者 next({ path: '/' })
**: 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。
（2）某個路由獨享的鉤子
你可以在路由配置上直接定義 beforeEnter 鉤子：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
（3）組件內的鉤子
最后，你可以使用 beforeRouteEnter 和 beforeRouteLeave，在路由組件內直接定義路由導航鉤子，
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) => {
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當鉤子執行前，組件實例還沒被創建
},
beforeRouteLeave (to, from, next) => {
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
}
}
beforeRouteEnter 鉤子 不能 訪問 this，因為鉤子在導航確認前被調用,因此即將登場的新組件還沒被創建。
不過，你可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，并且把組件實例作為回調方法的參數。
beforeRouteEnter (to, from, next) => {
next(vm => {
// 通過 `vm` 訪問組件實例
})
}
可以 在 beforeRouteLeave 中直接訪問 this。這個 leave 鉤子通常用來禁止用戶在還未保存修改前突然離開。可以通過 next(false) 來取消導航。
路由元信息，用于登錄驗證
定義路由的時候可以配置 meta 字段：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
下面例子展示在全局導航鉤子中檢查 meta 字段：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 確保一定要調用 next()
}
})
動態路由的一個demo
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = {
template: `
<div class="home">
<h2>Home</h2>
<p>hello</p>
</div>
`
}
const Parent = {
data () {
return {
transitionName: 'slide-left'
}
},
// dynamically set transition based on route change
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
},
template: `
<div class="parent">
<h2>Parent</h2>
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
`
}
const Default = { template: '<div class="default">default</div>' }
const Foo = { template: '<div class="foo">foo</div>' }
const Bar = { template: '<div class="bar">bar</div>' }
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/parent', component: Parent,
children: [
{ path: '', component: Default },
{ path: 'foo', component: Foo },
{ path: 'bar', component: Bar }
]
}
]
})
new Vue({
router,
template: `
<div id="app">
<h1>Transitions</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/parent">/parent</router-link></li>
<li><router-link to="/parent/foo">/parent/foo</router-link></li>
<li><router-link to="/parent/bar">/parent/bar</router-link></li>
</ul>
<transition name="fade" mode="out-in">
<router-view class="view"></router-view>
</transition>
</div>
`
}).$mount('#app')
假設我們有一個 Post 組件，需要基于 $route.params.id 獲取文章數據：
導航完成之后獲取：先完成導航，然后在接下來的組件生命周期鉤子中獲取數據。在數據獲取期間顯示『加載中』之類的指示。
導航完成之前獲取：導航完成前，在路由的 enter
鉤子中獲取數據，在數據獲取成功后執行導航。
<template>
<div class="post">
<div class="loading" v-if="loading">
Loading...
</div>
<div v-if="error" class="error">
{{ error }}
</div>
<div v-if="post" class="content">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>
export default {
data () {
return {
loading: false,
post: null,
error: null
}
},
created () {
// 組件創建完后獲取數據，
// 此時 data 已經被 observed 了
this.fetchData()
},
watch: {
// 如果路由有變化，會再次執行該方法
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
// replace getPost with your data fetching util / API wrapper
getPost(this.$route.params.id, (err, post) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
}
在導航完成前獲取數據
export default {
data () {
return {
post: null,
error: null
}
},
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) =>
if (err) {
// display some global error message
next(false)
} else {
next(vm => {
vm.post = post
})
}
})
},
// 路由改變前，組件就已經渲染完了
// 邏輯稍稍不同
watch: {
$route () {
this.post = null
getPost(this.$route.params.id, (err, post) => {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
}
路由信息對象的屬性
$route.path
類型: string
字符串，對應當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"
。
$route.params
類型: Object
一個 key/value 對象，包含了 動態片段 和 全匹配片段，如果沒有路由參數，就是一個空對象。
$route.query
類型: Object
一個 key/value 對象，表示 URL 查詢參數。例如，對于路徑 /foo?user=1
，則有$route.query.user == 1
，如果沒有查詢參數，則是個空對象。
$route.hash
類型: string
當前路由的 hash 值 (不帶 #
) ，如果沒有 hash 值，則為空字符串。
$route.fullPath
類型: string
完成解析后的 URL，包含查詢參數和 hash 的完整路徑。
$route.matched
類型: Array<RouteRecord>
一個數組，包含當前路由的所有嵌套路徑片段的 路由記錄 。路由記錄就是 routes
配置數組中的對象副本（還有在 children
數組）。
const router = new VueRouter({
routes: [
// 下面的對象就是 route record
{ path: '/foo', component: Foo,
children: [
// 這也是個 route record
{ path: 'bar', component: Bar }
]
}
]
})
當 URL 為 /foo/bar，$route.matched
將會是一個包含從上到下的所有對象（副本）。
$route.name
當前路由的名稱，如果有的話。（查看 命名路由）
