1.路由传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<!--网页-->
<div id="app">
<router-link to="/js?name=czj&age=22" tag="button">军事</router-link>
<router-link to="/ty/czj/18" tag="button">体育</router-link>
<hr>
<router-view></router-view>
</div>
<!---->
<template id="js">
<div>
<p>军事{{this.$route.query.name}}</p>
</div>
</template>
<template id="ty">
<div>
<p>体育{{this.$route.query.name}}</p>
</div>
</template>
<!--脚本-->
<script>
//定义路由组件
const js={
template: '#js',
created: function (){ //生命周期方法
console.log(this.$route);
console.log(this.$route.query.name);
console.log(this.$route.query.age);
}
}
const ty={
template: '#ty',
created: function (){
console.log(this.$route);
console.log(this.$route.params.name);
console.log(this.$route.params.age);
}
}
//定义路由规则
const routes=[
{path: '/js',component:js}, //参数存于$route.query中
{path: '/ty/:name/:age',component:ty} //参数存于$route.params中
]
//创建路由实例
const router = new VueRouter({
routes:routes
})
//vue对象控制对应网页
var vue = new Vue({
el: '#app',
router: router,
data: { //定义网页使用的参数
name: '张麻子'
}
})
//1.const定义的变量不可以修改
//2.var定义的变量可以修改,如果不初始化则会输出undefine,不会报错
//3.let是块级作用域,在函数内部用let定义变量,对函数外无影响
</script>
</body>
</html>
2.路由嵌套传参
![](https://i-blog.csdnimg.cn/blog_migrate/6e435f6b514a766cd3d51b25f7f31341.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5475d076db61cb03057990fa5206264c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4556b1fd540ab75f0dc4c79a9b3cb80b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3ea2434178751fe197013810c97f1150.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<!--网页-->
<div id="app">
<!--7.vue对象控制的对应网页-->
<router-link to="/one" tag="button">页面one</router-link>
<router-link to="/two" tag="button">页面two</router-link>
<hr>
<!--8.路由的出口,路由匹配的组件将会渲染在这里-->
<router-view></router-view>
</div>
<!--1.定义的模板one-->
<template id="one">
<div>
<p>你好,这是one</p>
<router-link to="/onesub1" tag="button">页面oneSub1</router-link>
<router-link to="/onesub2" tag="button">页面oneSub2</router-link>
<hr>
<!--9.路由的出口,路由匹配的组件将会渲染在这里-->
<router-view></router-view>
</div>
</template>
<!--2.定义one下面的两个子模板-->
<template id="onesub1">
<div>
<p>这是one的子页面1</p>
</div>
</template>
<template id="onesub2">
<div>
<p>这是one的子页面2</p>
</div>
</template>
<!--1.定义的模板two-->
<template id="two">
<div>
<p>你好,这是two</p>
</div>
</template>
<!--脚本-->
<script>
/*3.定义两个子组件*/
const onesub1 = {
template: "#onesub1"
}
const onesub2 = {
template: "#onesub2"
}
/*4.定义组件one*/
const one = {
template: '#one',
components: {
onesub1: onesub1,
onesub2: onesub2,
}
}
/*4.定义组件*/
const two = {
template: '#two'
}
/*5.定义路由规则*/
const routes = [
{
path: '/one',
component: one,
children: [/*这里说明了下面是一级的子路由,也就是嵌套路由*/
{path: '/onesub1', component: onesub1},
{path: '/onesub2', component: onesub2},
]
},
{
path: '/two', component: two
}
]
/* const routes = [
{
path: '/',
components: {
name1: one,
name2: two
}
}
]*/
/*6.创建路由实例*/
const router = new VueRouter({
routes: routes
})
//vue对象控制对应网页
var vue = new Vue({
el: '#app',
router: router,
data: { //定义网页使用的参数
name: '张麻子'
}
})
</script>
</body>
</html>
3.计算普通写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup="change1" v-model="n1">+
<input type="text" @keyup="change1" v-model="n2">=
<input type="text" v-model="r">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
n1:0,
n2:0,
r:0
},
methods:{
change1() {
this.r=parseInt(this.n1)+parseInt(this.n2)
}
}
});
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/b7d13be5f080920a600695c2fd16a89b.png)
4.watch监听机制
- 通过案例,我们可以知道watch可以监听数据,可以拿到我们监听的路径,可以拿到我们所操作的东西。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">+
<input type="text" v-model="n2">=
<input type="text" v-model="r">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
r: 0
},
methods: {
/* change1() {
this.r=parseInt(this.n1)+parseInt(this.n2)
}*/
},
watch: {
//监听
n1: function (newValue, oldValue) {
this.r = parseInt(this.n1) + parseInt(this.n2);
console.log(newValue + "," + oldValue)
},
n2: function (newValue, oldValue) {
this.r = parseInt(this.n1) + parseInt(this.n2);
console.log(newValue + "," + oldValue)
}
}
});
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/1f2b9d172292de310e0bec8a6dd3a55d.png)
5.路由监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!--需要用到路由,需要导入jar包-->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--6.将定义好的路由在域里面显示-->
<router-link to="/one" tag="button">一</router-link>
<router-link to="/two" tag="button">二</router-link>
<hr>
<router-view></router-view>
</div>
<!--1.定义好要显示的两个模板-->
<template id="one">
<div>
<p>one</p>
</div>
</template>
<template id="two">
<div>
<p>two</p>
</div>
</template>
<script>
/*2。定义好两个组件*/
const one = {
template: '#one'
}
const two = {
template: '#two'
}
/*3.定义路由的路线*/
const routes = [
{path: '/one', component: one},
{path: '/two', component: two}
]
/*4.定义路由*/
const router = new VueRouter({
routes: routes
})
var vue = new Vue({
el: "#app",
/*5.将定义好的路由应用到组件上*/
router: router,
data: {},
methods: {},
/*7.监听路由的路径*/
watch: {/*$route.path*/
"$route.path": function f(newValue, oldValue) {
console.log(newValue + "," + oldValue);
}
}
});
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/db99079d675fb6579fbb6022776b646b.png)
6.生命周期
创建期间的生命周期方法
beforeCreate
created
beforeMount
mounted
运行期间的生命周期方法
beforeUpdate
update
销毁期间的生命周期方法
beforeDestory
destoryed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<!--
创建期间的生命周期方法
beforeCreate
created
beforeMount
mounted
运行期间的生命周期方法
beforeUpdate
update
销毁期间的生命周期方法
beforeDestory
destoryed
-->
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vue = new Vue({
el: "#app",
beforeCreate:function (){
//这里打印不出msg,因为还没有初始化好
console.log(this.msg);
console.log("beforeCreate:"+this.say());
},
created:function (){//1.data可操作
//data和methods中的内容,已经初始化好
console.log(this.msg);
console.log("created:"+this.say());
},
beforeMount:function (){//2.data读到内存,还未放到页面中
//页面的内容,已经生成html在内存中,但还没渲染到页面上
console.log(document.querySelector("p").innerHTML);
console.log(document.querySelector("p").innerText);
},
mounted:function (){//3.内存-->页面上
//页面上的内容,数据已经渲染到页面上
console.log(document.querySelector("p").innerHTML)
console.log(document.querySelector("p").innerText)
},
data: {
msg:"lj"
},
methods:{
say(){
return"say method";
}
}
});
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/fca55b72e19789e57e60ff5084b233dd.png)