vue04-生命周期，Ajax,Router,webpack,CLI3.x
第七章 生命周期和 Ajax 服务端通信
7.1 Vue 实例生命周期
7.1.1 生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程
- 生命周期分为三大阶段：初始化显示、更新显示、销毁Vue实例
- 初始化阶段的钩子函数：
beforeCreate() 实例创建前：数据和模板均未获取到
created() 实例创建后: 最早可访问到 data 数据，但模板未获取到
beforeMount() 数据挂载前：模板已获取到，但是数据未挂载到模板上。
mounted() 数据挂载后： 数据已挂载到模板中
- 初始化阶段的钩子函数：
- 更新阶段的钩子函数：
beforeUpdate() 模板更新前：data 改变后，更新数据模板前调用
updated() 模板更新后：将 data 渲染到数据模板中
销毁阶段的钩子函数：
beforeDestroy() 实例销毁前
destroyed() 实例销毁后
7.1.2 生命周期图示
7.1.3 示例演示
- 创建 vue-06-lifecycle&ajax 目录，在它下面新建 01-生命钩子.html 文件，测试Vue实例生命周期
- 安装 Vue 模块
- 示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期title>
head>
<body>
<div id="app">
<h1> {{ message }} h1>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "fangsheng"
},
beforeCreate() {
console.log('beforeCreate()', this.$el, this.$data)
},
created() {
// 已初始化 data 数据，但数据未挂载到模板中
console.log('created()', this.$el, this.$data)
},
beforeMount() {
// 模板已获取到，但是数据未挂载到模板上
console.log('beforeMount()', this.$el, this.$data)
},
mounted() {
// 编译完成 ，数据已挂载到模板中
console.log('mounted()', this.$el, this.$data)
},
beforeUpdate() {
// 当 data 改变后，去更新模板中的数据前调用 // 注意：浏览器问题，需使用 this.$el.innerHTML 获取更新前的 Dom 模板数据
console.log('beforeUpdate()', this.$el.innerHTML, this.$data)
},
updated() {
// data 被 Vue 渲染之后的 Dom 数据模板
console.log('updated()', this.$el.innerHTML, this.$data)
},
beforeDestroy() {
// 销毁实例前调用
console.log('beforeDestroy()')
},
destroyed() {
// 销毁实例后调用
console.log('created()')
}
}).$mount('#app') // 实例中未使用 el 选项，可使用$mount()手动挂载Dom
// vm.$destroy() 销毁 Vue 实例
script>
body>
html>
7.2 liveServer 服务端插件
- 在 VS Code 中安装 liveServer 服务端插件，用于 Ajax 接口调用。
- 启动服务器：
方式1：任意打开一个 html 页面，在最下面可看到
点击它可启动，默认端口5500
方式2：在 html 页面单击右键 ，点击如下，访问页面
注意：如果之前启动过服务器，则使用 方式
2 启动html页面，不能使用 方式1 会端口占用
3. 更改 liveServer 默认端口号：
按 Ctrl + , 打开 Settings ，如下操作，打开 settings.json,
再json文件中添加 “liveServer.settings.port”: 8080,
7.3 Vue 中常用的 ajax 库
目前 Vue 官方没有内置任何 ajax 请求方法
7.3.1 vue-resource
在 vue1.x 版本中， 被广泛使用的非官方 Vue 插件 vue-resource
7.3.2 axios
在 vue 2+ 版本中，官方推荐使用非常棒的第三方 ajax 请求库
使用：结合生命钩子获取数据，渲染数据
7.4 vue-resource 的使用
7.4.1 参考文档
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
7.4.2 安装
npm install vue-resource
7.4.3 示例演示
- 在 vue-07-lifecycle&ajax 目录下 新建 db.json 文件存入模拟数据
[ {"name": "张三1", "age": 18}, {"name": "张三2", "age": 18} ]
- 在 vue-07-lifecycle&ajax 目录下，新建 02-vue-resource.html 文件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期title>
head>
<body>
<div id="app">
<h1>{{ repData }}h1>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="../node_modules/vue-resource/dist/vue-resource.js">script>
<script>
// 使用插件
Vue.use(VueResource)
var vm = new Vue({
el: "#app",
data: {
repData: []
},
created() {
this.$http.get('http://127.0.0.1:5500/vue-06-lifecycle&ajax/db.json').then((// 注意每个人的具体的URL 可能不一样 注意替换
response) => {
// 如果要使用Vue实例的this，此处需要使用箭头函数
// success callback
console.log(response.data)
// 响应数据
this.repData = response.data
}, (response) => {
// error callback
console.log(response.statusText) //错误信息
})
},
})
script>
body>
html>
7.5 axios 的使用
7.5.1 参考文档
https://github.com/axios/axios/blob/master/README.md
7.5.2 安装
npm install axios
7.5.3 示例演示
在 vue-06-lifecycle&ajax 目录下，新建 03-axios.html 文件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axiostitle>
head>
<body>
<div id="app">
<h1>{{ repData }}h1>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="../node_modules/axios/dist/axios.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
repData: []
},
created() {
axios.get('http://127.0.0.1:5500/vue-06-lifecycle&ajax/db.json').then((
response) => {
// 如果要使用Vue实例的this，此处需要使用箭头函数
// success callback
console.log(response.data)
// 响应数据
this.repData = response.data
}, (response) => {
// error callback
console.log(response.statusText) //错误信息
})
},
})
script>
body>
html>
7.6 组件化 axios 通信
- 将 vue-06-组件化通信 复制到 vue-06-lifecycle&ajax 目录下, 重命名为 bootstarp
- 进入 bootstarp 命令行，安装axios
npm install axios
- index.html 引入 axios.js 文件, 注意引入位置
<body>
<div id="app">
div>
<script src="../../node_modules/vue/dist/vue.js">script>
<script src="../../node_modules/axios/dist/axios.js">script>
<script src="../../node_modules/pubsub-js/src/pubsub.js">script>
<script src="components/AppNavbar.js">script>
<script src="components/AppLeaf.js">script>
<script src="components/home/Item.js">script>
<script src="components/Home/Dashboard.js">script>
<script src="components/Home/HomeList.js">script>
<script src="components/home/AppHome.js">script>
<script src="App.js">script>
<script src="main.js">script>
body>
在 bootstarp目录下 新建 emp.json 文件存入模拟数据
[{
"id": 1,
"name": "张三1",
"salary": 9899
}, {
"id": 2,
"name": "张三2",
"salary": 9999
}, {
"id": 3,
"name": "张三3",
"salary": 9099
}, {
"id": 4,
"name": "张三4",
"salary": 9199
}]
- 实现 axios 异步渲染数据, 重构 AppHome.js
;
(function () {
const template = `
Dashboard
Section title
效果：
第八章 Vue-Router 路由
8.1 什么是路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得非常简单。
通过根据不同的请求路径，切换显示不同组件进行渲染页面。
8.2 基本路由使用
创建 vue-08-router 目录，该目录下新建 01-vue-router-demo.html 文件
8.2.1 安装路由
注意：要安装 vue 模块
如果install 不下来可以网页下载对应的依赖 或者cope vue-router.js到对应的位置。
npm install vue-router
8.2.2 引入 vue-router.js
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
8.2.3 HTML 路由切换
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Routertitle>
head>
<body>
<div id="app">
<div class="header">
<h1>头部h1>
div>
<div class="left">
<p><ul>
<li><a href="#/foo">Go Fooa>li>
<li><a href="#/bar">Go Bara>li>
<li><router-link to="/foo">Go to Foorouter-link>li>
<li><router-link to="/bar">Go to Barrouter-link>li>
ul> p>
div>
<div class="main">
<router-view>router-view>
div>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="../node_modules/vue-router/dist/vue-router.js">script>
<script>
// 1. 定义组件
var Foo = { template: ' foo 组件 ' }
var Bar = { template: ' bar 组件 ' }
// 2. 配置路由表：当点击特定的 url 时，显示对应的那个组件。
const router = new VueRouter({
routes: [
//配置每个路由映射一个组件
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar } ] })
// 3. 注入路由到实例中
new Vue({
el: '#app',
router // router: router
})
script>
body>
html>
8.3 路由案例实战
8.3.1 拷贝项目
- 拷贝 vue-07-lifecycle&ajax\04-bootstrap-ajax 项目到 vue-08-router 下，
重命名为： 02-bootstrap-ajax-router - 进入 02-bootstrap-ajax-router 命令行，通过 NPM 安装 vue-router
npm install vue-router
- 修改 axios 请求地址
因为改了目录名称，所以要修改 vue-08-router\02-bootstrap-ajax-router\components\home\AppHome.js的URL，不然请求失败。
created() {
axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/emp.json')
.then(response => {//function (response) {
console.log(response.data, this);
this.empList = response.data
})
.catch(error => {//function (error) {
alert(error.message)
})
},
- 测试
是否可以正常访问: http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/index.html
8.3.2 News 组件
在 vue-08-router\02-bootstrap-ajax-router\components\home 目录下新建 News.js 文件
;
(function () {
const template = `
`
window.News = {
template
}
})()
8.3.3 About 组件
在 vue-08-router\02-bootstrap-ajax-router\components\home 目录下新建 About.js 文件
;
(function () {
const template = `
陪你学习，伴你梦想！
`
window.About = {
template
}
})()
8.3.4 配置路由
在 vue-08-router\02-bootstrap-ajax-router 目录下新建 router.js 路由配置文件
;
(function () {
window.router = new VueRouter({
routes: [{
path: '/',
component: AppHome
}, {
path: '/news',
component: News
}, {
path: '/about',
component: About
}]
})
})()
8.3.5 注入路由到实例中
在 main.js 中的 Vue 实例中引入 router
; (function () {
new Vue({
el: '#app',
// Vue实例中的template选项中引用了组件后，会将这个组件的渲染结果替换掉 #app 标签的元素
// template: ' ',
template: '8.3.6 配置路由渲染组件出口
在 App.js 中配置
;(function () {
// 组件模板中，必须包含有且只有一个根元素
const template = `
{{title}}
`
window.App = {
template,
data () {
return {
title: '仪表盘'
}
},
components: {
AppNavbar, // 等价于 AppNavbar: AppNavbar
AppLeaf, // AppLeaf: AppLeaf
AppHome
}
}
})()
8.3.7 修改跳转链接
在 AppLeaf.js 中修改跳转链接
;(function () {
window.AppLeaf = {
template: ``
}
})()
8.3.8 引入 js 文件
在 index.html 中引入 vue-router.js 、Bar.js 、Foo.js、router.js ，注意引入的位置顺序
<body>
<div id="app">
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script src="./node_modules/vue-router/dist/vue-router.js">script>
<script src="./node_modules/axios/dist/axios.js">script>
<script src="components/AppNavbar.js">script>
<script src="components/AppLeaf.js">script>
<script src="components/home/Dashboard.js">script>
<script src="components/home/Item.js">script>
<script src="components/home/HomeList.js">script>
<script src="components/home/AppHome.js">script>
<script src="components/home/News.js">script>
<script src="components/home/About.js">
script> <script src="router.js">script>
<script src="App.js">script>
<script src="main.js">script>
body>
8.3.9 启动测试
访问：http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/index.html#/
点击左侧菜单 ，右侧显示不同的组件效果
8.4 样式匹配-高亮显示导航
问题：你会发现不管点击左侧导航哪个链接，当前都是在第一个导航处显示高亮背景。
按 F12 查看源代码，发现高亮样式在
- 标签上，应该点击哪个作用在哪个上面
参考路由 API 文档：https://router.vuejs.org/zh/api/ -
8.4.1 tag
标签。
可在<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染结果 --> <li>foo</li>8.4.2 active-class
可在
可以通过路由的构造选项 linkActiveClass 来全局配置，不用在每个
的类名 。8.4.3 exact
默认情况 下，路由地址 / 、 /foo 、 /bar 都以 / 开头，它们都会去匹配 / 地址的 CSS 类名。
可在<!-- 这个链接只会在地址为 / 的时候被激活, --> <router-link to="/" exact>8.4.4 实现高亮显示导航链接
- 重构：AppLeaf.js
; (function () { window.AppLeaf = { template: `` } })()- 重构 router.js
; (function () { window.router = new VueRouter({ // 全局配置 router-link 标签生成的 CSS 类名 linkActiveClass: 'active', routes: [{ path: '/', component: AppHome }, { path: '/news', component: News }, { path: '/about', component: About }] }) })()- 重新访问，点击哪个就哪个有背景色
8.5 嵌套路由
8.5.1 演示效果
8.5.2 子路由组件
Sport.js 体育栏目组件
Tech.js 科技栏目组件8.5.3 配置嵌套路由
; (function () { window.router = new VueRouter({ // 全局配置 router-link 标签生成的 CSS 类名 linkActiveClass: 'active', routes: [{ path: '/', component: AppHome }, { path: '/news', component: News, children: [ // 当匹配到 /news/sport 请求时， // 组件 Sport 会被渲染在 News 组件中的中 { path: '/news/sport', component: Sport }, { // 简写方式，等价于 /news/tech 路径，注意前面没有 / ,有 / 就是根目录了 path: 'tech', component: Tech }, { //点击新闻管理默认选中 新闻， // 就是/news后面没有子路径时, redirect 重定向到 体育 path: '', redirect: '/news/sport' } ] }, { path: '/about', component: About } ] }) })()8.6 嵌套路由案例-新闻管理
新闻管理模块中体育和科技栏目，点击不同栏目下方显示不同内容，将体育和科技为 Sport和 Tech 两个组件,
所以将 News.js 中的模板内容区域分别抽取到 Sport.js 和 Tech.js 文件中- 拷贝 Vue\01-配套源码 下的 db 目录到 vue-08-router\02-bootstrap-ajax-router\ 下
8.6.1 Sport 组件
在 vue-08-router\02-bootstrap-ajax-router\components\home 目录下新建 Sport.js 文件
; (function () { const template = `` window.Sport = { data() { return { sportArr: [], } }, //钩子异步加载数据 created() { this.getSportArr() }, methods: { getSportArr() { axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/db/sport.json').then(response => { //function (response) { console.log(response.data, this); this.sportArr = response.data }).catch(error => { //function (error) { alert(error.message) }) } }, template } })()世界杯开赛啦
世界杯于明晚8点举行开幕式.....
8.6.2 Tech 组件
在 vue-08-router\02-bootstrap-ajax-router\components\home 目录下新建 Tech.js 文件
; (function () { const template = `` window.Tech = { data() { return { techArr: [] } }, //钩子异步加载数据 created() { this.getTechArr() }, methods: { getTechArr() { axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/db/tech.json').then(response => { //function (response) { console.log(response.data, this); this.techArr = response.data }).catch(error => { //function (error) { alert(error.message) }) } }, template } })()- {{tech.title}}
世界杯开赛啦
世界杯于明晚8点举行开幕式.....
8.6.3 配置嵌套路由
在 vue-08-router\02-bootstrap-ajax-router\router.js 中配置嵌套路由
; (function () { window.router = new VueRouter({ // 全局配置 router-link 标签生成的 CSS 类名 linkActiveClass: 'active', routes: [{ path: '/', component: AppHome }, { path: '/news', component: News, children: [ // 当匹配到 /news/sport 请求时， // 组件 Sport 会被渲染在 News 组件中的中 { path: '/news/sport', component: Sport }, { // 简写方式，等价于 /news/tech 路径，注意前面没有 / ,有 / 就是根目录了 path: 'tech', component: Tech }, { //点击新闻管理默认选中 新闻， // 就是/news后面没有子路径时, redirect 重定向到 体育 path: '', redirect: '/news/sport' } ] }, { path: '/about', component: About } ] }) })()8.6.4 跳转链接和路由渲染出口
在 vue-08-router\02-bootstrap-ajax-router\components\home\News.js 中配置
; (function () { const template = `` window.News = { template } })()
8.6.5 index.html 引入 js
<body> <div id="app"> div> <script src="./node_modules/vue/dist/vue.js">script> <script src="./node_modules/vue-router/dist/vue-router.js">script> <script src="./node_modules/axios/dist/axios.js">script> <script src="components/AppNavbar.js">script> <script src="components/AppLeaf.js">script> <script src="components/home/Dashboard.js">script> <script src="components/home/Item.js">script> <script src="components/home/HomeList.js">script> <script src="components/home/AppHome.js">script> <script src="components/home/News.js">script> <script src="components/home/Sport.js">script> <script src="components/home/Tech.js">script> <script src="components/home/About.js"> script> <script src="router.js">script> <script src="App.js">script> <script src="main.js">script> body>8.6.6 启动测试
访问：http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/index.html
点击新闻管理 ，右侧没有默认选中
8.6.7 配置默认选中
在 vue-08-router\02-bootstrap-ajax-router\router.js 的 news 子路由中配置默认重定向到新闻
{ path: ‘’, redirect: ‘/news/sport’}{ //点击新闻管理默认选中 新闻， // 就是/news后面没有子路径时, redirect 重定向到 体育 path: '', redirect: '/news/sport' }再重新测试下
8.7 缓存路由组件与案例
8.7.1 场景与作用
- 默认情况下，当路由组件被切换后组件实例会销毁，当切换回来时实例会重新创建。
- 如果可以缓存路由组件实例，切换后不用重新加载数据，可以提高用户体验。
8.7.2 实现缓存路由组件
<keep-alive> <router-view></router-view> </keep-alive>8.7.3 案例演示
- 在 vue-08-router\02-bootstrap-ajax-router\components\home\About.js 的模板中添加一个input输入框，
; (function () { const template = `` window.About = { template } })()陪你学习，伴你梦想！
- 输入框输入内容后，来回切换组件，实现输入框内容不会被清空。
在 vue-08-router\02-bootstrap-ajax-router\App.js 中配置
<!-- 配置路由渲染组件出口 --> <keep-alive> <!-- 配置路由渲染组件出口 --> <router-view> <h1 slot="dashboard" class="page-header">{{title}}</h1> </router-view> </keep-alive>8.8 路由组件传递数据
8.8.1 传递数据步骤
- 路由配置
{ path: '/news', component: News, children: [ // 当匹配到 /news/sport 请求时， // 组件 Sport 会被渲染在 News 组件中的中 { path: '/news/sport', component: Sport, children: [{ path: '/news/sport/detail/:id', // :id 路径变量占位符 component: SportDetail }] }, { // 简写方式，等价于 /news/tech 路径，注意前面没有 / ,有 / 就是根目录了 path: 'tech', component: Tech }, { //点击新闻管理默认选中 新闻， // 就是/news后面没有子路径时, redirect 重定向到 体育 path: '', redirect: '/news/sport' } ] },- 路由跳转路径
<!-- 要动态拼接值, 则 to 属性值是 JS 表达式, 要写 JS 表达式, 则要使用 v-bind 方式绑定属性 注意 + 前面有单引号 '' --> <router-link :to="'/news/sport/detail/' + sport.id"> {{sport.title}} </router-link>- 在路由组件中读取请求参数
this.$route.params.id8.8.2 体育栏目案例
需求：在 体育 栏目下点击标题后，在下方显示详情
8.8.2.1 配置路由
详情显示是属于 Sport 组件的，在 vue-08-router\02-bootstrap-ajax-router\router.js 中配置
(function () { window.router = new VueRouter({ // 全局配置 router-link 标签生成的 CSS 类名 linkActiveClass: 'active', routes: [{ path: '/', component: AppHome }, { path: '/news', component: News, children: [ // 当匹配到 /news/sport 请求时， // 组件 Sport 会被渲染在 News 组件中的中 { path: '/news/sport', component: Sport, children: [{ path: '/news/sport/detail/:id', // :id 路径变量占位符 component: SportDetail }] }, { ............ 省略8.8.2.2 Sport 组件指定路径和渲染出口
在 vue-08-router\02-bootstrap-ajax-router\components\home\Sport.js 中配置
; (function () { const template = `` window.Sport = { data() { return { sportArr: [], } }, //钩子异步加载数据 created() { this.getSportArr() }, methods: { getSportArr() { axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/db/sport.json').then(response => { //function (response) { console.log(response.data, this); this.sportArr = response.data }).catch(error => { //function (error) { alert(error.message) }) } }, template } })()-
{{sport.title}}
8.8.2.3 SportDetail 详情组件
通过 this.$route.params.id 在 SportDetail 模板中可获取路径变量中的 id 值，
在 vue-08-router\02-bootstrap-ajax-router\components\home\SportDetail.js 配置如下; (function () { const template = `` window.SportDetail = { template, data() { return { id: null, sportDetail: {} } }, created() { // 注意： // 1. 是 $route , 最后没有 r 字母 // 2. created 钩子只会调用1次，当切换标题列表的路由时，此钩子不会再次调用, // 所以对应 ID 不会被更新， 可以使用 watch 监听 $route 路由的变化。 this.getRportById() }, methods: { getRportById() { // 将路径变量值赋值给id this.id = this.$route.params.id - 0 // 1. 异步获取所有数据 axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/db/sport.json').then(response => { const sportArr = response.data // 2. 通过 id 获取指定数据 // find 会将满足条件的数据返回，仅返回一条 this.sportDetail = sportArr.find((detail) => { // this 要代表当前组件实现，则要使用箭头函数 return detail.id === this.id }) }).catch(error => { alert(error.message) }) } }, watch: { // 是对象，不是函数噢 // 使用 watch 监听 $route 路由的变化,获取 ID 值 '$route': function () { this.getRportById() console.log('$router改变了', this.id) } } } })()ID: {{ id }}
{{sportDetail.title}}
{{sportDetail.content}}
8.8.2.4 index.html 引入 js
引入 SportDetail.js
<body> <div id="app"> div> <script src="./node_modules/vue/dist/vue.js">script> <script src="./node_modules/vue-router/dist/vue-router.js">script> <script src="./node_modules/axios/dist/axios.js">script> <script src="components/AppNavbar.js">script> <script src="components/AppLeaf.js">script> <script src="components/home/Dashboard.js">script> <script src="components/home/Item.js">script> <script src="components/home/HomeList.js">script> <script src="components/home/AppHome.js">script> <script src="components/home/News.js">script> <script src="components/home/SportDetail.js">script> <script src="components/home/Sport.js">script> <script src="components/home/Tech.js">script> <script src="components/home/About.js"> script> <script src="router.js">script> <script src="App.js">script> <script src="main.js">script> body>测试 。。。
8.9 编程式路由导航
8.9.1 声明式与编程式路由
声明式( 直接通过 标签href指定链接跳转) 编程式(采用 js 代码链接跳转,如 localhost.href) router.push(…) 8.9.2 编程式路由导航 API
this.$router.push(path) 相当于点击路由链接(后退1步,会返回当前路由界面) this.$router.replace(path) 用新路由替换当前路由(后退1步,不可返回到当前路由界面) this.$router.back() 后退回上一个记录路由 this.$router.go(n) 参数 n 指定步数 this.$router.go(-1) 后退回上一个记录路由 this.$router.go(1) 向前进下一个记录路由8.9.3 科技栏目案例
8.9.3.1 配置路由
{ // 简写方式，等价于 /news/tech 路径，注意前面没有 / ,有 / 就是根目录了 path: 'tech', component: Tech, children: [{ // 点击 栏目标题列表，查看详情 path: '/news/tech/detail/:id', component: TechDetail }] },8.9.3.2 Tech 绑定点击事件和渲染出口
- 测试JS函数中push/replace处理路由跳转 和 back/ge后退
; (function () { const template = `` window.Tech = { data() { return { techArr: [] } }, //钩子异步加载数据 created() { this.getTechArr() }, methods: { pushTech(id) { // push 可后退回来 // 是 $router , 有字母 r 路由器。用的反单引号 ` ` 拼接 this.$router.push(`/news/tech/detail/${id}`) }, replaceTech(id) { // replace 不可后退回来 this.$router.replace(`/news/tech/detail/${id}`) }, getTechArr() { axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/db/tech.json').then(response => { //function (response) { console.log(response.data, this); this.techArr = response.data }).catch(error => { //function (error) { alert(error.message) }) } }, template } })()- {{tech.title}}
8.9.3.3 TechDetail 详情组件
; (function () { const template = `` window.TechDetail = { template, data() { return { techDetail: {} } }, created() { // 不要少 this this.getTechById() }, methods: { // 通过 id 获取详情 getTechById() { // 1. 获取路径变量 id 值 const id = this.$route.params.id - 0 // 2. 获取所有数据 axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/db/tech.json').then(response => { const techArr = response.data // 3. 查找指定id的数据 this.techDetail = techArr.find(tech => { return tech.id === id }) }).catch(error => { alert(error.message) }) } }, watch: { // 是对象，不是函数噢 // 使用 watch 监听 $route 路由的变化,获取 ID 值 '$route': function () { this.getTechById() } } } })(){{techDetail.title}}
{{techDetail.content}}
8.9.3.4 index.html 引入 js
- 引入TechDetail.js
<body> <div id="app"> div> <script src="./node_modules/vue/dist/vue.js">script> <script src="./node_modules/vue-router/dist/vue-router.js">script> <script src="./node_modules/axios/dist/axios.js">script> <script src="components/AppNavbar.js">script> <script src="components/AppLeaf.js">script> <script src="components/home/Dashboard.js">script> <script src="components/home/Item.js">script> <script src="components/home/HomeList.js">script> <script src="components/home/AppHome.js">script> <script src="components/home/News.js">script> <script src="components/home/SportDetail.js">script> <script src="components/home/Sport.js">script> <script src="components/home/TechDetail.js">script> <script src="components/home/Tech.js">script> <script src="components/home/About.js"> script> <script src="router.js">script> <script src="App.js">script> <script src="main.js">script>
