1. vue-cli
- Vue Cli 是一个基于 Vue.js 进行快速开发的完整系统
1. 安装
- Vue Cli 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)
npm install -g @vue/cli
//检查版本
vue --version
2. 创建项目
vue create xxxx
//可视化界面
vue ui
3. 环境依赖
- package.json文件
- dependencies 上线环境
- devDependencies 开发环境
- package-lock.json
- 锁定版本
4. babel eslint
- babel ES6转换ES5
- eslint 强制格式校验
5. features
- Babel
- Router
- Vuex
- CSS Pre-processors
2. Vue Router
- 创建单页应用，是非常简单的
1. 定义 (路由) 组件
- 新建vue文件
- 组件template
2. 定义路由
- router.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'//引入组件
Vue.use(Router)
export default new Router({
mode: 'history',// history hash
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
3. 创建和挂载根实例
- main.js文件
- render函数是渲染一个视图，然后提供给el挂载
render: h => h(App)等价于render:function(h){return h(App);}
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
4. 动态路由匹配
- 可以在任何组件内通过
this.$router访问路由器，也可以通过this.$route访问当前路由
// Home.vue
export default {
computed: {
username () {
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1 ? this.$router.go(-1):this.$router.push('/')
}
}
}
5. 参数传递
- v-bind 传参
- 传递
//name 进入的组件名称
//params 传递的参数
<router-link :to="{name: 'home', params: {id: '123', name: 'aaa', age: 2}}">首页传参</router-link>
- 接收
- params一个对象
<p>{{$route.params.id}}</p>
<p>{{$route.params.name}}</p>
<p>{{$route.params.age}}</p>
- 利用url传递
- 传递
<router-link to="/details/333/aaa">详情页</router-link>
- 接收
<p>{{$route.params.userId}}</p>
<p>{{$route.params.name}}</p>
- router.js
{
path: '/details/:userId/:name',
component: Details
},
3. <router-link>
- 支持用户在具有路由功能的应用中 (点击) 导航
- to 属性指定目标地址
- 默认渲染成带有正确链接的
<a>标签
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
4. <router-view>
- functional 组件，渲染路径匹配到的视图组件(占位)
<template>
<div class="navbar">
<ul id="main">
<li><router-link to="/home" >home</router-link></li>
</ul>
<!-- 路由匹配到的组件将显示在这里 -->
<router-view></router-view>
</div>
</template>
<router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件
<router-view class="view one"></router-view>
<!--Foo-->
<router-view class="view two" name="a"></router-view>
<!--Bar-->
<router-view class="view three" name="b"></router-view>
<!--Baz-->
<script>
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
</script>
5. 重定向和别名
1. 重定向
redirect
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
- 可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
- 一个方法
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
2. 别名
- url没有改变，改变的内容
alias
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
6. 导航守卫
1. 全局前置守卫
router.beforeEach
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// code
})
- 守卫是异步解析执行，此时导航在所有守卫
resolve完之前一直处于等待中。 to: Route即将要进入的目标 路由对象from: Route当前导航正要离开的路由next: Function一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。next()进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。next(false)中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。 -next('/')或者next({ path: '/' })跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如replace: true、name: 'home'之类的选项以及任何用在router-link的to prop或router.push中的选项。next(error)如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。- 确保要调用
next方法，否则钩子就不会被resolved。
2. 全局解析守卫
-
router.beforeResolve和router.beforeEach类似 -
区别
在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
3. 全局后置钩子
- 这些钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
// code
})
4. 路由独享的守卫
router.beforeEnter
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
5. 组件内的守卫
- 组件内
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
7. 页面动画
fade-enter进入过渡的开始状态fade-enter-active进入过渡的结束状态fade-enter-to进入结束状态fade-leave离开过渡的开始状态fade-leave-active离开过渡的结束状态fade-leave-to离开结束状态
