Vue的学习（五）
41、vue-router之路由参数的随意设置与伪静态链接地址处理：
访问路径：你的加上#/content/1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之路由参数的随意设置与伪静态链接地址处理</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--
router-link: 定义路由的链接的标签
to: 定义跳转到那个组件
router-view：展示组件的标签
-->
<router-link to="/content">内容</router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="content">
<div>
id:{{$route.params.id}}
<br />
<button @click="show">检测参数</button>
</div>
</script>
</body>
<script>
// 定义组件
const content = {
template: "#content",
methods: {
show() {
/*this.$route.params)：获取路由传过来的变量（所有变量）*/
console.log(this.$route.params);
/*获取名为cid的变脸*/
// console.log(this.$route.params.cid);
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:cid :定义了一个名为cid的变量*/
{path: ‘/content/:id‘, component: content}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>42、vue-router之路由参数的验证处理保存路由安全：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之路由参数的验证处理保存路由安全</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--
router-link: 定义路由的链接的标签
to: 定义跳转到那个组件
router-view：展示组件的标签
-->
<router-link to="/content">内容</router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="content">
<div>
id:{{$route.params.id}}
<br />
<button @click="show">检测参数</button>
</div>
</script>
</body>
<script>
// 定义组件
const content = {
template: "#content",
methods: {
show() {
/*this.$route.params)：获取路由传过来的变量（所有变量）*/
console.log(this.$route.params);
/*获取名为cid的变脸*/
// console.log(this.$route.params.cid);
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:id :定义了一个名为id的变量*/
/*:id(a\d{2}) :表示必须以a开头包含两位数字，比如：a23 */
{path: ‘/content/:id(a\\d{2})‘, component: content}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>43、vue-router之路由参数默认值的设置技巧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之路由参数默认值的设置技巧</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--
router-link: 定义路由的链接的标签
to: 定义跳转到那个组件
router-view：展示组件的标签
-->
<router-link to="/content">内容</router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="content">
<div>
id:{{id}}
<br />
<button @click="show">检测参数</button>
</div>
</script>
</body>
<script>
// 定义组件
const content = {
template: "#content",
/*子组件的data是一个匿名函数*/
data() {
return {
id: 0
}
},
/*
* mounted钩子函数的调用时机：
* 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
* 做一些ajax请求获取数据来进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
mounted() {
this.id = this.$route.params.id;
if (!this.id) {
this.id = 1;
}
},
methods: {
show() {
/*this.$route.params)：获取路由传过来的变量（所有变量）*/
console.log(this.$route.params);
/*获取名为cid的变脸*/
// console.log(this.$route.params.cid);
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:id :定义了一个名为id的变量*/
/*? :表示匹配一个整数或者0个*/
{path: ‘/content/:id?‘, component: content}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>44、vue-router之实例操作新闻列表单页面应用与路由别名：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之实例操作新闻列表单页面应用与路由别名</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<!--只要要绑定变量，都可用v-bind: 简写 ：-->
<!--
name:‘content‘:指定名为 content的路由，即‘/content/:id‘
params:{id:v.id}}:作用是赋值给路由中的 :id 变量
-->
<router-link :to="{name:‘content‘,params:{id:v.id}}">{{v.title}}</router-link>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<li>{{field.title}} - {{field.id}}</li>
<p>
{{field.content}}
</p>
<!--
router-link: 定义路由的链接的标签
to: 定义跳转到那个组件
router-view：展示组件的标签
-->
<router-link to="/">返回首页</router-link>
</div>
</script>
</body>
<script>
const data = [
{id:1,title:‘PHP开源免费框架‘,content:‘这是PHP的内容...‘},
{id:2,title:‘CMS开源免费框架‘,content:‘这是CMS的内容...‘}
];
// 定义组件
const home = {
template: "#home",
/*子组件的data是一个匿名函数*/
data() {
return {
news: data
}
}
};
const content = {
template: "#content",
/*子组件的data是一个匿名函数*/
data() {
return {
field:{}
}
},
/*
* mounted钩子函数的调用时机：
* 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
* 做一些ajax请求获取数据来进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
mounted() {
let id = this.$route.params.id;
for (let k=0;k<data.length;k++) {
if (data[k].id===id) {
this.field = data[k];
}
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:id :定义了一个名为id的变量*/
/*路由带有变量的时候给路由一个名称，便于后面的调用*/
{path: ‘/content/:id‘, component: content,name:‘content‘},
{path: ‘/‘, component: home}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>45、vue-router之路由嵌套在文章系统中的使用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之路由嵌套在文章系统中的使用方法</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<!--只要要绑定变量，都可用v-bind: 简写 ：-->
<!--
name:‘content‘:指定名为 content的路由，即‘/content/:id‘
params:{id:v.id}}:作用是赋值给路由中的 :id 变量
-->
<router-link :to="{name:‘content‘,params:{id:v.id}}">{{v.title}}</router-link>
</li>
<!--展示其子路由的页面-->
<router-view></router-view>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<li>{{field.title}} - {{field.id}}</li>
<p>
{{field.content}}
</p>
<!--
router-link: 定义路由的链接的标签
to: 定义跳转到那个组件
router-view：展示组件的标签
-->
<router-link to="/">返回首页</router-link>
</div>
</script>
</body>
<script>
const data = [
{id:1,title:‘PHP开源免费框架‘,content:‘这是PHP的内容...‘},
{id:2,title:‘CMS开源免费框架‘,content:‘这是CMS的内容...‘}
];
// 定义组件
const home = {
template: "#home",
/*子组件的data是一个匿名函数*/
data() {
return {
news: data
}
}
};
const content = {
template: "#content",
/*子组件的data是一个匿名函数*/
data() {
return {
field:{}
}
},
/*
* mounted钩子函数的调用时机：
* 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
* 做一些ajax请求获取数据来进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
mounted() {
let id = this.$route.params.id;
for (let k=0;k<data.length;k++) {
if (data[k].id===id) {
this.field = data[k];
}
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:id :定义了一个名为id的变量*/
/*路由带有变量的时候给路由一个名称，便于后面的调用*/
/*children:定义home的子路由*/
{path: ‘/‘, component: home,children:[
{path: ‘/content/:id‘, component: content,name:‘content‘}
]}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>46、vue-router之使用watch与mounted解决同一组件页面不刷新数据的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之使用watch与mounted解决同一组件页面不刷新数据的问题</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<!--只要要绑定变量，都可用v-bind: 简写 ：-->
<!--
name:‘content‘:指定名为 content的路由，即‘/content/:id‘
params:{id:v.id}}:作用是赋值给路由中的 :id 变量
-->
<router-link :to="{name:‘content‘,params:{id:v.id}}">{{v.title}}</router-link>
</li>
<!--展示其子路由的页面-->
<router-view></router-view>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<li>{{field.title}} - {{field.id}}</li>
<p>
{{field.content}}
</p>
<!--
router-link: 定义路由的链接的标签
to: 定义跳转到那个组件
router-view：展示组件的标签
-->
<router-link to="/">返回首页</router-link>
</div>
</script>
</body>
<script>
const data = [
{id:1,title:‘PHP开源免费框架‘,content:‘这是PHP的内容...‘},
{id:2,title:‘CMS开源免费框架‘,content:‘这是CMS的内容...‘}
];
// 定义组件
const home = {
template: "#home",
/*子组件的data是一个匿名函数*/
data() {
return {
news: data
}
}
};
const content = {
template: "#content",
/*子组件的data是一个匿名函数*/
data() {
return {
field:{}
}
},
/*
* 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容
* */
watch: {
‘$route‘(to,from) {
this.load();
}
},
/*
* mounted钩子函数的调用时机：
* 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
* 做一些ajax请求获取数据来进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
/*
* mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变
* */
mounted() {
this.load();
},
methods: {
load() {
let id = this.$route.params.id;
for (let k=0;k<data.length;k++) {
if (data[k].id===id) {
this.field = data[k];
}
}
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:id :定义了一个名为id的变量*/
/*路由带有变量的时候给路由一个名称，便于后面的调用*/
/*children:定义home的子路由*/
{path: ‘/‘, component: home,children:[
{path: ‘/content/:id‘, component: content,name:‘content‘}
]}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>47、vue-router之通过程序控制路由的跳转：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之通过程序控制路由的跳转</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<!--只要要绑定变量，都可用v-bind: 简写 ：-->
<!--
.prevent: 阻止 a 标签的默认跳转行为
-->
<a href="" @click.prevent="go(v.id)">{{v.title}}</a>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<li>{{field.title}} - {{field.id}}</li>
<p>
{{field.content}}
</p>
<a href="" @click.prevent="back()">返回</a>
</div>
</script>
</body>
<script>
const data = [
{id: 1, title: ‘PHP开源免费框架‘, content: ‘这是PHP的内容...‘},
{id: 2, title: ‘CMS开源免费框架‘, content: ‘这是CMS的内容...‘}
];
// 定义组件
const home = {
template: "#home",
/*子组件的data是一个匿名函数*/
data() {
return {
news: data
}
},
methods: {
go(id) {
//第一种传路径的方式
//const url = "/content/" + id;
//第二种传路径的方式
// const url = {path:‘/content/‘+id};
//第三种传路径的方式
const url = {name:‘content‘,params:{id:id}};
/*
* $route：获取参数用的
* $router：设置路由用的
* */
//push会保存历史记录
this.$router.push(url);
//replace会替换掉当前的路径
// this.$router.replace(url);
}
}
};
const content = {
template: "#content",
/*子组件的data是一个匿名函数*/
data() {
return {
field: {}
}
},
/*
* 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容
* */
watch: {
‘$route‘(to, from) {
this.load();
}
},
/*
* mounted钩子函数的调用时机：
* 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
* 做一些ajax请求获取数据来进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
/*
* mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变
* */
mounted() {
this.load();
},
methods: {
load() {
let id = this.$route.params.id;
for (let k = 0; k < data.length; k++) {
if (data[k].id == id) {
this.field = data[k];
}
}
},
back() {
/*
* 如果这里使用了this.$router.go(-1)，则上面的路由跳转
* 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录
* */
/*go(-1): 返回上一页去*/
this.$router.go(-1);
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:id :定义了一个名为id的变量*/
/*路由带有变量的时候给路由一个名称，便于后面的调用*/
{path: ‘/‘, component: home},
{path: ‘/content/:id‘, component: content, name: ‘content‘}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>48、vue-router之命名视图的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之命名视图的实例</title>
<style>
.menu {
border: solid 2px red;
background: aqua;
padding: 100px;
display: block;
}
.news {
border: solid 2px green;
background: orange;
padding: 50px;
float: left;
width: 36.3%;
}
.slide {
border: solid 2px gold;
background: blueviolet;
padding: 50px;
float: right;
width: 50%;
}
</style>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-view name="news"></router-view>
<router-view name="slide"></router-view>
</div>
<script type="text/x-template" id="menu">
<div class="menu">
<a href="http://www.baidu.com">百度</a>
<a href="https://www.cnblogs.com/chenjianbo/p/9866312.html">Mounted函数</a>
</div>
</script>
<script type="text/x-template" id="news">
<div class="news">
<li v-for="v in news">{{v.title}}</li>
</div>
</script>
<script type="text/x-template" id="slide">
<div class="slide">
<li v-for="v in data">{{v.title}}</li>
</div>
</script>
</body>
<script>
// 定义组件
const menu = {
template: "#menu"
};
const news = {
template: "#news",
data() {
return {
news: [
{title:‘数学分析‘},
{title:‘高等代数‘},
{title:‘数据模型‘}
]
}
}
};
const slide = {
template: "#slide",
data() {
return {
data: [
{title: ‘今日新闻‘},
{title: ‘最新新闻‘},
{title: ‘昨日新闻‘}
]
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
{
/*
* 在根路径下定义子组件使用 components 定义多个
* */
path:‘/‘,components: {
default: menu,
news: news,
slide: slide
}
}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>49、vue-router之重定向redirect的使用技巧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之重定向redirect的使用技巧</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<a href="http://www.baidu.com">百度</a>
<router-link to="/about">关于我们</router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<!--只要要绑定变量，都可用v-bind: 简写 ：-->
<!--
.prevent: 阻止 a 标签的默认跳转行为
-->
<a href="" @click.prevent="go(v.id)">{{v.title}}</a>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<li>{{field.title}} - {{field.id}}</li>
<p>
{{field.content}}
</p>
<a href="" @click.prevent="back()">返回</a>
</div>
</script>
</body>
<script>
const data = [
{id: 1, title: ‘PHP开源免费框架‘, content: ‘这是PHP的内容...‘},
{id: 2, title: ‘CMS开源免费框架‘, content: ‘这是CMS的内容...‘},
{id: 3, title: ‘关于我们‘, content: ‘一个还不知道未来会发生什么的少年，在拼命的学习中....‘}
];
// 定义组件
const home = {
template: "#home",
/*子组件的data是一个匿名函数*/
data() {
return {
news: data
}
},
methods: {
go(id) {
//第一种传路径的方式
//const url = "/content/" + id;
//第二种传路径的方式
// const url = {path:‘/content/‘+id};
//第三种传路径的方式
const url = {name:‘content‘,params:{id:id}};
/*
* $route：获取参数用的
* $router：设置路由用的
* */
//push会保存历史记录
this.$router.push(url);
//replace会替换掉当前的路径
// this.$router.replace(url);
}
}
};
const content = {
template: "#content",
/*子组件的data是一个匿名函数*/
data() {
return {
field: {}
}
},
/*
* 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容
* */
watch: {
‘$route‘(to, from) {
this.load();
}
},
/*
* mounted钩子函数的调用时机：
* 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
* 做一些ajax请求获取数据来进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
/*
* mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变
* */
mounted() {
this.load();
},
methods: {
load() {
let id = this.$route.params.id;
for (let k = 0; k < data.length; k++) {
if (data[k].id == id) {
this.field = data[k];
}
}
},
back() {
/*
* 如果这里使用了this.$router.go(-1)，则上面的路由跳转
* 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录
* */
/*go(-1): 返回上一页去*/
this.$router.go(-1);
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:id :定义了一个名为id的变量*/
/*路由带有变量的时候给路由一个名称，便于后面的调用*/
{path: ‘/‘, component: home},
{path: ‘/content/:id‘, component: content, name: ‘content‘},
{path: ‘/about‘, redirect:{name:‘content‘,params:{id:3}}}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html>50、vue-router之使用路由别名定制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之使用路由别名定制</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<a href="http://www.baidu.com">百度</a>
<router-link to="/about">关于我们</router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<!--只要要绑定变量，都可用v-bind: 简写 ：-->
<!--
.prevent: 阻止 a 标签的默认跳转行为
-->
<a href="" @click.prevent="go(v.id)">{{v.title}}</a>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<li>{{field.title}} - {{field.id}}</li>
<p>
{{field.content}}
</p>
<a href="" @click.prevent="back()">返回</a>
</div>
</script>
</body>
<script>
const data = [
{id: 1, title: ‘PHP开源免费框架‘, content: ‘这是PHP的内容...‘},
{id: 2, title: ‘CMS开源免费框架‘, content: ‘这是CMS的内容...‘},
{id: 3, title: ‘关于我们‘, content: ‘一个还不知道未来会发生什么的少年，在拼命的学习中....‘}
];
// 定义组件
const home = {
template: "#home",
/*子组件的data是一个匿名函数*/
data() {
return {
news: data
}
},
methods: {
go(id) {
//第一种传路径的方式
//const url = "/content/" + id;
//第二种传路径的方式
// const url = {path:‘/content/‘+id};
//第三种传路径的方式
const url = {name:‘content‘,params:{id:id}};
/*
* $route：获取参数用的
* $router：设置路由用的
* */
//push会保存历史记录
this.$router.push(url);
//replace会替换掉当前的路径
// this.$router.replace(url);
}
}
};
const content = {
template: "#content",
/*子组件的data是一个匿名函数*/
data() {
return {
field: {}
}
},
/*
* 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容
* */
watch: {
‘$route‘(to, from) {
this.load();
}
},
/*
* mounted钩子函数的调用时机：
* 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
* 做一些ajax请求获取数据来进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
/*
* mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变
* */
mounted() {
this.load();
},
methods: {
load() {
let id = this.$route.params.id;
for (let k = 0; k < data.length; k++) {
if (data[k].id == id) {
this.field = data[k];
}
}
},
back() {
/*
* 如果这里使用了this.$router.go(-1)，则上面的路由跳转
* 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录
* */
/*go(-1): 返回上一页去*/
this.$router.go(-1);
}
}
};
//定义路由器，然后把组件交给路由器
let routes = [
/*:id :定义了一个名为id的变量*/
/*路由带有变量的时候给路由一个名称，便于后面的调用*/
{path: ‘/‘, component: home},
{path: ‘/content/:id‘, component: content, name: ‘content‘},
/*alias: 定义路由的别名，是一个数组，所以可以定义多个别名*/
{path: ‘/content/3‘, alias:[‘/about‘]}
];
//routes:routes可以写成routes
// let router = new VueRouter({routes:routes});
let router = new VueRouter({routes});
new Vue({
el: ‘#app‘,
//把路由器注入主组件中，这样才有效果
/*
* 注意：router 与 routes 的区别：
* router 是一个机制，相当于一个管理者，它来管理路由。
* routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
* route，它是一条路由。
* */
//如果 router的名称和router的一样可以直接写成 router 即可
// router: router
router
})
</script>
</html> 相关推荐
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21