当前位置:
首页 > 网站开发 > 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
最新更新
01 Web应用模式
python 约瑟夫生者小游戏 用list实现
DBPack 赋能 python 微服务协调分布式事务
PYTHON之SELENIUM调用XPATH实现网页操作
Python双人五子棋
matplotlib可视化系列之【排版】
C# 编写一个简单易用的 Windows 截屏增强工
Python 引用其他路径下的module
【Python - 基础】基础是一切升华的根本
自动化办公:手机号码提取器,使用正则
三大常用数据库事务详解之三:事务运行
三大常用关系型数据库事务详解之二:基
三大关系型数据库事务详解之一:基本概
MongoDB常用命令(2)
MongoDB基本介绍与安装(1)
SQLServer触发器调用JavaWeb接口
SQL Server索引的原理深入解析
SqlServer2016模糊匹配的三种方式及效率问题
SQL中Truncate的用法
sqlserver 多表关联时在where语句中慎用tri
js将一段字符串的首字母转成大写
纯原生html编写的h5视频播放器
H5仿原生app短信验证码vue2.0组件附源码地
TypeScript(4)接口
TypeScript(3)基础类型
TypeScript(2)WebStorm自动编译TypeScript配置
TypeScript(1)介绍与安装
ES6 - promise(1)
ES6 - promise(2)
ES6 - promise(3)