Vue.js入门
Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
Vue.js安装(最新版本2.6.11)
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!
安装教程:https://cn.vuejs.org/v2/guide/installation.html
使用Vue.js
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
本地引入本地地址即可
尝试使用Vuejs
<div id="app">
{{ message }}
</div>
<hr>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<hr>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<hr>
<div id="app-4">
<ul>
<li v-for="item in list1">{{item}}</li><!--相当于遍历-->
</ul>
</div>
<hr>
<!--//示例计数器-->
<div id="app-5">
<p>当前计数:{{count}}</p>
<!-- <button v-on:click="count++">+</button>-->
<!-- <button v-on:click="count--">-</button>-->
<button @click="Increment">+</button><!--@:是v-on 的语法糖-->
<button @click="Less">-</button>
</div>
<script>
var app = new Vue({
el: '#app',//选中的位置
data: {
message: 'Hello Vue!'//给message赋值
}
})
//绑定元素 attribute
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
//显示和隐藏
var app3 = new Vue({
el: '#app-3',
data: {
seen: true//true:显示 false: 隐藏
}
})
//vue展示列表
const app4=new Vue({
el: '#app-4',
data:{
list1:["l1","l2","l3","l4"]
}
});
app4.$data.list1.push("l5");//在data前面加一个$用来分辨其他的data
//示例计数器
const app5=new Vue({
el:"#app-5",
data:{
count:1
},
methods:{//定义方法的
//加
Increment:function () {
this.count++;
},
//减
Less:function () {
this.count--;
}
}
});
</script>
Vue中的mvvm
MVVM(Model–view–viewmodel)是一种软件架构模式。
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来,这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器,[1] 这意味着视图模型负责从模型中暴露(转换)数据对象,以便轻松管理和呈现对象。在这方面,视图模型比视图做得更多,并且处理大部分视图的显示逻辑。[1] 视图模型可以实现中介者模式,组织对视图所支持的用例集的后端逻辑的访问。
MVVM是马丁·福勒的PM(Presentation Model)设计模式的变体。[2][3] MVVM以相同的方式抽象出视图的状态和行为,[3] 但PM以不依赖于特定用户界面平台的方式抽象出视图(建立了视图模型)。
MVVM和PM都来自MVC模式。MVVM由微软架构师Ken Cooper和Ted Peters开发,通过利用WPF(微软.NET图形系统)和Silverlight(WPF的互联网应用衍生品)的特性来简化用户界面的事件驅動程式設計。[3] 微软的WPF和Silverlight架构师之一John Gossman于2005年在他的博客上发表了MVVM。
MVVM也被称为model-view-binder,特别是在不涉及.NET平台的实现中。ZK(Java写的一个Web应用框架)和KnockoutJS(一个JavaScript库)使用model-view-binder。[3][4][5]
以上是维基百科里的解释
下面我们来看看vue中mvvm
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0XrhZ7QM-1585386621552)(F:\学习资料\笔记\1127286-20190723104840960-523296026.png)]
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用
vm
(ViewModel 的缩写) 这个变量名表示 Vue 实例。
在这里插入图片描述
创建Vue实例传入的options
el:决定之后Vue实例会管理哪一个DOM
- 类型:
string | Element
- 限制:只在用
new
创建实例时生效。
data:Vue实例对应的数据对象
- 类型:
Object | Function(组件当中data必须是一个函数)
- 限制:组件的定义只接受
function
。
methods:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用
- 类型:
{ [key: string]: Function }
详细:https://cn.vuejs.org/v2/api/index.html
Vue的生命周期
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NkzG6uqE-1585386621554)(https://blog.kuangstudy.com/usr/uploads/2019/10/1579484219.jpg)]
基本语法
插值操作
Mustache语法(双大括号语法)
v-once指令的使用
- 该指令后面不需要跟任何表达式(比如之前的v-for后面是跟表达式的)。
- 该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。
<div id="app">
<p v-once>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'app',
data:{
message:'hello vue'
}
});
</script>
v-html
- 该指令后面往往会跟上一个string类型
- 会将string的html解析出来并且进行渲染
<div id="app1">
<div v-html="url"></div>
</div>
<script src="js/vue.js"></script>
<script>
const app=new Vue({
el:'#app1',
data:{
url:'<a href="http://www.baidu.com">百度一下</a>'
}
});
</script>
v-text
- 作用和Mustache比较相似:都是用于数据显示在界面中
- 它通常情况下,接受一个string类型
- 它会替换标签内的所有内容,不解析特殊字符
<div id="app">
<p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello vue'
}
});
</script>
v-pre
- 用于跳过这个元素和它子元素编译过程,用于显示原本的Mustache语法
<div id="app">
<p >{{message}}</p>
<p v-pre>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello vue'
}
});
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j7hNP2Bt-1585386621554)(F:\学习资料\笔记\image-20200311150347012.png)]效果
v-cloak
- 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p >{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
<!-- 当app实例对#app进行管理后cloak会vein删掉-->
setTimeout(()=>{
var app=new Vue({
el:'#app',
data:{
message:'hello vue'
}
});
},1000);
</script>
绑定属性
v-bind
- v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外)
<div id="app">
<!-- 错误示范:
<img src="{{imgUrl}}">在vue中不会识别这个会把当做普通的字符串
-->
<img v-bind:src="imgUrl">
<!--简写-->
<img :src="imgUrl">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1307955174,105946806&fm=26&gp=0.jpg'
}
});
</script>
动态绑定class(对象语法)
<style>
.ative{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 在有时候我们需要固定的class我们就可直接写 原本class 这两个是可以同时存在的-->
<p class="title" :class="{ative:isAtive,ative1:isAtive2}">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello vue',
isAtive:true,
isAtive2: false
}
});
</script>
如果过于复杂的可以用methods来返回
<p class="title" :class="getClass()">{{message}}</p>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello vue',
isAtive: true,
isAtive2: false
},
methods: {
getClass: function () {
return {ative: this.isAtive, ative1: this.isAtive2}
}
}
});
</script>
动态绑定class(数组语法)
<div id="app">
<p class="title" :class="[a,b]">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello vue',
a: 'ative',
b: 'ativeq'
}
});
</script>
动态绑定style(对象语法)
<div id="app">
<!-- <p :style="{属性名:属性值}">{{message}}</p>-->
<p :style="{color:fontColor}">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello vue',
fontColor:'red'
}
});
</script>
动态绑定style(数组语法)
<div id="app">
<!-- <p :style="[]">{{message}}</p>-->
<p :style="[style1,style2]">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello vue',
style1:{color:'red'},
style2:{fontSize:'24px'},
}
});
</script>
计算属性
基本使用
<div id="app">
{{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
firstName:"谢",
lastName :"超" ,
},
//计算属性
computed:{
fullName:function () {
return this.firstName+this.lastName;
}
}
});
</script>
计算属性的复杂操作
<div id="app">
<p>书的总价位:{{totalPrice}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello vue',
books:[
{name:"java",price:123},
{name:"c",price:12},
{name:"c#",price:1323},
{name:"hph",price:123},
]
},
computed:{
totalPrice:function () {
let total=0;
for (let i=0;i<this.books.length;i++ ){
total+=this.books[i].price;
}
return total;
}
}
});
</script>
计算属性的getter和setter
- 每个计算属性都包含有getter和setter
<div id="app">
{{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
firstName:"谢",
lastName :"超" ,
},
//计算属性
computed:{
// fullName:function () {
// return this.firstName+this.lastName;
// }
fullName: {//一般情况下计算属性只有get方法没有set方法所以可以简写成上面哪种方式
set:function(){
},
get:function () {
return this.firstName + this.lastName;
}
}
}
});
</script>
计算属性和methods的对比
案列:
<div id="app">
计算属性:{{fullName}}
methods:{{fullName1}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
firstName:"张",
lastName :"三" ,
},
//计算属性
computed:{
fullName:function () {
return this.firstName+this.lastName;
}
},
methods:{
fullName1:function () {
return this.firstName+this.lastName;
}
}
});
</script>
注:我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 firstName
和 lastName
还没有发生改变,多次访问 fullName
计算属性会立即返回之前的计算结果,而不必再次执行函数。
由此案列可以得出:使用计算属性比method性能要高,要多使用计算属性
块级作用域let/var的区别
-
声明次数(同一变量)
var 可以声明多次
let 只可声明一次//var var a=1; var a=2; console.log(a); // 2 //let let b=1; let b=2;//直接报错
-
作用域
var 是函数级作用域,let是块级作用域- ES6 新增了
let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
- ES6 新增了
-
变量提升问题
//var console.log(a); var a=0; //结果a= undefined //let 暂时性死区(let块级作用域下,在变量声明之前的区域内不可使用该变量。) console.log(b);//Uncaught ReferenceError: Cannot access 'b' before initialization(不可再变量声明前使用) let b = 2;
-
典型事例
var a = 0; function test() { console.log(a); var a = 2; } test(); // undefined 包含var是函数作用域 + 变量提升问题 console.log(a);// 0 访问到的变量全局作用域下的a变量,test函数中声明的变量只作用域是当前函数内。 // for 循环应用实例 // var for(var i=0;i<5;i++){ setTimeout(function(){ console.log("var:" + i); }) } // let for(let i=0;i<5;i++){ setTimeout(function(){ console.log("let" + i); }) }
双向绑定
v-model
<div id="app">
<input v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello vue'
}
});
</script>
组件
组件是可复用的 Vue
实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment
等框架有着异曲同工之妙。
- Vue.component():注册组件
- my-component-li:自定义组件的名字
- template:组件的模板
组件示例
<div id="vue">
<ul>
<my-component-li>
</my-component-li>
</ul>
</div>
<script type="text/javascript">
// 先注册组件
Vue.component('my-component-li', { t
emplate: '<li>Hello li</li>'
});
// 再实例化 Vue var vm = new Vue({ el: '#vue' });
</script>
用prop传值
<script type="text/javascript">
// 先注册组件
Vue.component('my-component-li', {
props: ['item'],
template: '<li>Hello {{item}}</li>'
});
// 再实例化 Vue
var vm = new Vue({
el: '#vue',
data: {
items: ["张三", "李四", "王五"]
}
});
</script>
<div id="vue">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</ul>
</div>
Axios网络通信
Axios 是一个开源的可以用在浏览器端和 NodeJS
的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下:
- 从浏览器中创建
XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API [JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF(跨站请求伪造)
下面展示一个示例
-
引入axios.min.js
-
写message.json
{
"name": "hzx",
"age": 17,
"job": "student"
}
3.编写html
<div id="app" v-cloak>
<p>姓名:{{user.name}}</p>
<p>年龄:{{user.age}}</p>
<p>工作:{{user.job}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello vue'
},
data(){//使用data方法不是data属性
return{
user:{
name :null,
age : null,
job :null,
}
}
},
mounted(){//钩子函数
axios.get("message.json").then(response => (this.user = response.data));
}
});
</script>
slot标签
<div id="app">
<User>
<Usertitle slot="Usertitle" :title="title"></Usertitle>
<Username slot="Username" v-for="username in usernames" :name="username"></Username>
</User>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component("User",{
template:'<div>\
<slot name="Usertitle"></slot>\
<ul>\
<slot name="Username"></slot>\
</ul>\
</div>'
});
Vue.component("Usertitle",{
props:['title'],
template: '<p>{{title}}</p>'
});
Vue.component("Username",{
props: ['name'],
template: '<li>{{name}}</li>'
});
var app=new Vue({
el:'#app',
data:{
title:"用户名单",
usernames:["小明","小强","小鱼"],
}
});
</script>
自定义事件
使用 this.$emit(‘自定义事件名’, 参数)
<div id="app">
<User>
<Usertitle slot="Usertitle" :title="title"></Usertitle>
<Username slot="Username" v-for="(username,index) in usernames" :name="username" :index="index" @remove="removeName(index)" :key="index"></Username>
</User>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component("User",{
template:'<div>\
<slot name="Usertitle"></slot>\
<ul>\
<slot name="Username"></slot>\
</ul>\
</div>'
});
Vue.component("Usertitle",{
props:['title'],
template: '<p>{{title}}</p>'
});
Vue.component("Username",{
props: ['name',"index"],
template: '<li>{{name}},<button @click="remove(index)">删除</button></li>'
,methods: {
remove:function (index) {
// 这里的 remove 是自定义事件的名称,需要在 HTML 中使用 v-on:remove 的方式指派
this.$emit("remove");
}
}
});
var app=new Vue({
el:'#app',
data:{
title:"用户名单",
usernames:["小明","小强","小鱼"],
},
methods:{
removeName:function (index){
this.usernames.splice(index,1);
}
}
});
</script>
Node.js
安装
下载地址:http://nodejs.cn/download/
安装步骤无脑下一步就好了
确认nodejs安装成功:
- cmd 下输入
node -v
,查看是否能够正确打印出版本号即可! - cmd 下输入
npm-v
,查看是否能够正确打印出版本号即可!
安装 Node.js 淘宝镜像加速器(cnpm)
# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org
创建一个vue项目
vue init webpack hello-vue
vue-cli
安装:
cnpm install vue-cli -g #2.0版本
vue list //检测是否安装成功
cnpm install @vue-cli -g # 3.0版本
@vue -V //检测是否安装成功
创建一个vue项目
vue create 项目名;
vue init webpack 项目名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MRoKqt75-1585386621555)(F:\学习资料\笔记\image-20200317085240763.png)]
vue-router路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DPI7oPVj-1585386621556)(F:\学习资料\笔记\image-20200317085337475.png)]
安装
npm install vue-router --save-dev
简单router(路由)示例:
在components目录下创建一个vue文件名为app
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!--可用tag属性来指定<router-link>渲染成什么样子-->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
在src目录下创建router目录,在这个目录下创建一个index.js
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// path:访问路由的路径
//name :路由的名字可以,通过这个来访问这个路由
//component:所引用的组件
export default new Router({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
在main.js中添加扫描路由路径
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
下面我们来看个动态路由示例(也就是路径中带参数):
动态路由
export default new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
一个“路径参数”使用冒号 :
标记。当匹配到一个路由时,参数值会被设置到 this.$route.params
,可以在每个组件内使用。于是,我们可以更新 User
的模板,输出当前用户的 ID:
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
嵌套路由
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
通过 children
来实现嵌套路由
export default new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
HTML5 History 模式
vue-router
默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState
API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
配置404
为了避免404这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }//`*`它会匹配不能被其他路由匹配的路径
]
})
重定向和路由别名
重定向
routes: [
{ path: '/index', component:index }
{ path: '/toindex', redirect: '/index' }//重定向到`/index`
]
//redirect也可以设置路由的name
routes: [
{ path: '/index',name:'index' component:index }
{ path: '/toindex', redirect: {name:'index'} }//重定向到`/index`
]
别名
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。
/index
的别名是 /a
,意味着,当用户访问 /a
时,URL 会保持为 /a
,但是路由匹配则为 /index
,就像用户访问 /index
一样。
routes: [
{ path: '/index', component: A, alias: '/a' }
]
语法糖集
v-on ===> @
v-bind ===> :
ue-router` 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState
API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
配置404
为了避免404这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }//`*`它会匹配不能被其他路由匹配的路径
]
})
重定向和路由别名
重定向
routes: [
{ path: '/index', component:index }
{ path: '/toindex', redirect: '/index' }//重定向到`/index`
]
//redirect也可以设置路由的name
routes: [
{ path: '/index',name:'index' component:index }
{ path: '/toindex', redirect: {name:'index'} }//重定向到`/index`
]
别名
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。
/index
的别名是 /a
,意味着,当用户访问 /a
时,URL 会保持为 /a
,但是路由匹配则为 /index
,就像用户访问 /index
一样。
routes: [
{ path: '/index', component: A, alias: '/a' }
]