当前位置:
首页 > 网站开发 > JavaScript教程 >
-
160_Vue实战:路由模式,404,路由钩子
路由模式
路由模式有两种
- hash:路径带 # 符号,如 http://localhost/#/login
-
history:路径不带 # 符号,如 http://localhost/login
hash:路径带 # 符号,如 http://localhost/#/login
路由模式不设置,默认hash,也可以显式设置
export default new Router({
mode: "hash",
routes: [
]
});
history:路径不带 # 符号,如 http://localhost/login
修改路由配置index.js,设置mode: "history"
export default new Router({
mode: "history",
routes: [
]
});
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: '/main/:username',
component: Main,
props: true,
children: [
{
path: '/user/profile/:id',
name: 'UserProfile',
component: UserProfile
},
{
path: '/user/list/:id/:name',
name: 'UserList',
component: UserList,
props: true
}
]
},
{
path: '/login',
component: Login
},
{
path: '/goHome',
redirect: '/main'
}
]
});
404
创建一个名为 NotFound.vue的视图组件
<template>
<div>
<h1>404,你的页面走丢了</h1>
</div>
</template>
<script>
export default {
name: "NotFound"
}
</script>
<style scoped>
</style>
修改路由配置,配置404路由
import NotFound from "../views/NotFound";
{
path: '*',
component: NotFound
}
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
import NotFound from "../views/NotFound";
Vue.use(Router);
export default new Router({
mode: "hash",
routes: [
{
path: '/main/:username',
component: Main,
props: true,
children: [
{
path: '/user/profile/:id',
name: 'UserProfile',
component: UserProfile
},
{
path: '/user/list/:id/:name',
name: 'UserList',
component: UserList,
props: true
}
]
},
{
path: '/login',
component: Login
},
{
path: '/goHome',
redirect: '/main'
},
{
path: '*',
component: NotFound
}
]
});
路由钩子
beforeRouteEnter:在进入路由前执行
beforeRouteLeave:在离开路由前执行
<template>
<div>
<h1>用户列表</h1>
{{id}}
{{name}}
</div>
</template>
<script>
export default {
name: "UserList",
props: ['id','name'],
beforeRouteEnter: (to,from,next)=>{
console.log("进入路由之前");
next();
},
beforeRouteLeave: (to,from,next)=>{
console.log("离开路由之前");
next();
}
}
</script>
<style scoped>
</style>
参数说明:
- to:路由将要跳转的路径信息
- from:路径跳转前的路径信息
-
next:路由的控制参数
- next() 跳入下一个页面
- next(’/path’) 改变路由的跳转方向,使其跳到另一个路由
- next(false) 返回原来的页面
-
next((vm)=>{}) 仅在 beforeRouteEnter 中可用,vm 是组件实例
钩子函数中使用异步请求
axios官网:http://www.axios-js.com/
安装 Axios cnpm install axios vue-axios -s
PS D:\code\vue\hello-vue> cnpm install axios vue-axios -s
√ Installed 2 packages
√ Linked 3 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 7s(network 7s), speed 7.29KB/s, json 3(49.92KB), tarball 3.89KB)
PS D:\code\vue\hello-vue>
main.js引用 Axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios);
import Vue from 'vue'
import App from './App'
import router from './router'
// 导入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios);
// 安装路由
Vue.use(router);
// 安装ElementUI
Vue.use(ElementUI);
new Vue({
el: '#app',
router, // 启用路由
render: h => h(App) // 启用ElementUI
})
准备数据 : 只有我们的 static 目录下的文件是可以被访问到的,所以我们就把静态文件放入该目录下
/static/mock/data.json
{
"name": "haoran",
"url": "https://blog.csdn.net/adsdaas",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com/95256449"
},
{
"name": "haoran",
"url": "https://blog.csdn.net/adsdaas"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
在 beforeRouteEnter 中进行异步请求
<template>
<div>
<h1>用户列表</h1>
{{id}}
{{name}}
</div>
</template>
<script>
export default {
name: "UserList",
props: ['id','name'],
beforeRouteEnter: (to,from,next)=>{
console.log("进入路由之前");
next(vm => {
vm.getData(); // 进入路由之前执行getData
});
},
beforeRouteLeave: (to,from,next)=>{
console.log("离开路由之前");
next();
},methods: {
getData: function () {
this.axios({
method: "get",
url: "http://localhost:8080/static/mock/data.json"
}).then(function (response) {
console.log(response);
});
}
}
}
</script>
<style scoped>
</style>
出 处:
https://www.cnblogs.com/wl3pb/p/15579883.html
最新更新
C语言两结构体之间的成员互换
【爬虫实战项目】Python爬取Top100电影榜单
linux(Ubuntu)安装python
anaconda peompt 、labalimg 数据标注
【Python数据分析案例】python数据分析老番
【爬虫+情感判定+Top10高频词+词云图】“
【爬虫+情感判定+Top10高频词+词云图】"
机器学习回顾篇(2):最小二乘法
机器学习回顾篇(3):线性回归
机器学习回顾篇(4):逻辑回归
支线第九篇:
数据库的值获取过来转换成Json数组的方法
支线第八篇:数据类型转换
支线第七篇:又是解决报错
支线第六篇:停下脚步,理清思路
支线第五篇:配置接口
支线第四篇:解决数据库报错
支线第三篇:设计数据库结构
支线第二篇:这又是另外一个问题:如何响
支线第一篇:小作业:回答问题
C# List<T> 转 DataTable
C# List<T> 转 DataTable
C# List<T> 转 DataTable 方法修改版
使用插件式开发称重仪表驱动,RS232串口
实现简单的csv文件上传和bootstrap表格的下
第一百一十七篇: JavaScript 工厂模式和原型
第一百一十六篇: JavaScript理解对象
第一百一十五篇: JS集合引用类型Map
第一百一十四篇: JS数组Array(三)数组常
第一百一十三篇: JS数组Array(二)数组方