1. Vue-router基本使用
(1)什么是Vue Router
Vue Router和v-if/v-show一样, 是用来切换组件的显示的。
v-if/v-show是标记来切换(true/false)，Vue Router用哈希来切换(#/xxx)。
比v-if/v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候传递参数。
(2)Vue Router使用
① 导入Vue Router
<script src="js/vue.js"></script>
<!--注意点: 必须先导入Vue之后再导入Vue Router-->
<script src="js/vue-router.js"></script>
② 定义路由规则
const routes = [
// 重定向路由：{path:'被重定向值',redirect:'重定向之后的值'}
{ path: '/', redirect: '/two' },
// 数组中的每一个对象就是一条规则
{ path: '/one', component: one },
{ path: '/two', component: two }
];
③ 根据路由规则创建路由对象
const router = new VueRouter({
routes: routes,
// 通过linkActiveClass指定导航激活状态样式类名来设置选中样式
//或者通过重写router-link-active类名来实现设置选中样式。
linkActiveClass: "nj-active"
});
④ 将路径对象挂载到Vue实例中
let vue = new Vue({
el: '#app',
// 4.将创建好的路由对象绑定到Vue实例上
router: router,
// 专门用于定义局部组件的
components: {
one: one,
two: two
},
});
// 1.定义组件
const one = {
template: "#one"
};
const two = {
template: "#two"
};
⑤ 修改URL哈希值
⑥ 通过渲染匹配的组件
router-link：专门用于设置hash的标签。
默认情况下Vue会将router-link渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么。
router-link是通过to属性来设置url的hash值的，不用写#。
<div id="app">
<a href="#/one">切换到第一个界面</a>
<a href="#/two">切换到第二个界面</a>
<!-- 或者 -->
<router-link to="/one" tag="button">切换到第一个界面
</router-link>
<router-link to="/two" tag="button">切换到第二个界面
</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<template id="one">
<div class="onepage">
<p>我是第一个界面</p>
</div>
</template>
<template id="two">
<div class="twopage">
<p>我是第二个界面</p>
</div>
</template>
2.Vue-router传递参数
(1)传递思路
只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象，只要能拿到路由对象, 就可以通过路由对象拿到传递的参数。
(2)传递方法一（通过URL参数的方式传递）
在指定HASH的时候,通过URL传递参数(?key=value&key=value),
<router-link to="/one?name=lnj&age=33" tag="button">
切换到第一个界面
</router-link>
在传递的组件的生命周期方法中通过this.$route.query获取。
const one = {
template: "#one",
created: function () {
console.log(this.$route);
console.log(this.$route.query.name);
console.log(this.$route.query.age);
}
};
(3)传递方法二（通过路由规则中的占位符传递）
在指定路由规则的时候通过/:key/:key的方式来指定占位符
const routes = [
// 数组中的每一个对象就是一条规则
{ path: '/one', component: one },
{ path: '/two/:name/:age', component: two }
];
在指定HASH的时候, 通过/value/value的方式来传递值
<router-link to="/two/zs/66" tag="button">
</router-link>
在传递的组件的生命周期方法中通过 this.$route.params的方式来获取
const two = {
template: "#two",
created: function () {
console.log(this.$route);
console.log(this.$route.params.name);
console.log(this.$route.params.age);
}
};
3.编程式导航（push,replace,go）
声明式导航：
编程式导航：router.push(…) router.replace(…)
(1)push（参数可以是一个字符串或者一个描述地址的对象）
字符串：
this.$router.push('home')
对象：
this.$router.push({ path: 'home' })
命名的路由(如果提供path,params会被忽略不生效)
this.$router.push({ name: 'user', params: { userId: '123' } })
this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
带查询参数：
this.$router.push({ path: 'register',
query: { plan: 'private' }
})/register?plan=private
this.$router.push({ path: `/user/${userId}` }) // -> /user/123
(2)replace
用法同push方法，两者的区别有：
push()：这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
replace()：它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
(3)go
this.$router.go(n)：在 history 记录中向前或者后退n步。
在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)
后退一步记录，等同于 history.back()
this.$router.go(-1)
前进 3 步记录
this.$router.go(3)
如果 history 记录不够用，那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)
(4)注意点
当你点击 时，push()方法会在内部调用，所以说，点击 等同于调用 router.push(…)。
router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。
4.VueRouter-嵌套路由
(1)什么是嵌套路由
嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件。
(2)实例：
① 路由使用：
<div id="app">
<router-link to="/one" tag="button">切换到第一个界面</router-link>
<router-link to="/two" tag="button">切换到第二个界面</router-link>
<router-view></router-view>
</div>
<template id="one">
<div class="onepage">
<p>我是第一个界面</p>
<router-link to="/one/onesub1" tag="button">
//切换到第一个子界面
</router-link>
<router-link to="/one/onesub2" tag="button">
//切换到第二个子界面
</router-link>
<router-view></router-view>
</div>
</template>
<template id="onesub1">
<div class="onesub1page">
<p>我是第一个界面子界面1</p>
</div>
</template>
<template id="onesub2">
<div class="onesub2page">
<p>我是第一个界面子界面2</p>
</div>
</template>
<template id="two">
<div class="twopage">
<p>我是第二个界面</p>
</div>
</template>
② 定义组件
const onesub1 = {
template: "#onesub1",
};
const onesub2 = {
template: "#onesub2",
};
const one = {
template: "#one",
components: {
onesub1: onesub1,
onesub2: onesub2
}
};
const two = {
template: "#two"
};
③ 定义切换的规则(定义路由规则)
const routes = [
// 数组中的每一个对象就是一条规则
{
path: '/one',
component: one,
children: [
// 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/
{
path: "onesub1",
component: onesub1
},
{
path: "onesub2",
component: onesub2
}
]
},
{ path: '/two', component: two }
];
5.VueRouter-命名视图
(1)什么是命名视图?
命名视图和前面讲解的具名插槽很像, 都是让不同的出口显示不同的内容，命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同。
(2)命名视图的使用：
① 和匿名插槽一样, 如果指定了多个router-view, 那么当路由地址被匹配之后, 多个router-view中显示的内容是一样的。
② 和具名插槽一样, 如果想同时显示多个不同的组件, 那么可以给出口指定名称。
在路由规则中给组件起名称：
const routes = [
// 数组中的每一个对象就是一条规则
{
path: '/',
components: { //一个路由包括多个组件components
name1: one, //key:value key:命名 value:组件名
name2: two
}
},
];
在出口中指定显示哪个名称的组件：
<router-view name="name1"></router-view>
<router-view name="name2"></router-view>
6.Watch属性
(1)什么是watch属性
Watch属性是专门用于监听数据变化的, 只要数据发生了变化, 就会自动调用对应数据的回调方法。
(2)Watch监听路由变化
Watch属性不仅仅能够监听数据的变化, 还能够监听路由地址的变化，在企业开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的。
(3)示例：
let vue = new Vue({
el: '#app',
// 4.将创建好的路由对象绑定到Vue实例上
router: router,
watch: {
// 可以通过watch监听Model中数据的变化,
只要数据发生变化, 就会自动调用对应的回调函数
num1: function (newValue, oldValue) {
// console.log(this.num1);
// console.log(newValue, oldValue);
this.res = parseInt(this.num1) + parseInt(this.num2)
},
num2: function (newValue, oldValue) {
this.res = parseInt(this.num1) + parseInt(this.num2)
},
// 可以通过watch监听路由地址的变化, 只要路由地址发生变化, 就会自动调用对应的回调函数
"$route.path": function (newValue, oldValue) {
console.log(newValue, oldValue);
}
},
// 这里就是MVVM中的Model
data: {
num1: 0,
num2: 0,
res: 0
},
// 专门用于存储监听事件回调函数
methods: {
change1(){
this.res = parseInt(this.num1) + parseInt(this.num2)
},
change2(){
this.res = parseInt(this.num1) + parseInt(this.num2)
}
},
// 专门用于定义局部组件的
components: {
one: one,
two: two
}
});
7.Vue-Cli
(1)什么是Vue-CLI(Command Line Interface)?
Vue-CLI是vue官方提供的脚手架工具,
默认已经帮我们搭建好了一套利用webpack管理vue的项目结构
(2)如何安装Vue-cli和使用Vue-CLI?
安装脚手架工具: npm install -g @vue/cli
检查是否安装成功: vue --version
通过脚手架创建项目: vue create project-name
(3)通过Vue-CLI生成的项目结构解读
在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹。
这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置。
在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹。
这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue。
node_modules文件夹: 存储了依赖的相关的包。
public文件夹: 任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们，一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库。
src文件夹: 代码文件夹
|----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
|----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
|----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)
|----router文件夹: 存储VueRouter相关文件
|----store文件夹: 存储Vuex相关文件
|----App.vue:根组件
|----main.js:入口js文件
8.Vue-router模式
vue-router若使用history模式，打包部署后页面不能刷新，刷新会出现404。
若使用hash模式，则url会有#，不推荐。
3686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
