当前位置:
首页 > 网站开发 > 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
最新更新
Python获取微信好友数据
Python 的排序方法 sort 和 sorted 的区别
WinForm轻松实现自定义分页 (转载)
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
在win系统安装配置 Memcached for PHP 5.3 图文
箱图在数据预处理中的应用
Python WEB开发:用Tornado框架制作简易【表
自从学会了用python解析视频,都不用去找
Python代码阅读(第50篇):对列表间隔取
Python爬虫+数据分析+可视化展示,分析《
MongoDB常用命令(2)
MongoDB基本介绍与安装(1)
SQLServer触发器调用JavaWeb接口
SQL Server索引的原理深入解析
SqlServer2016模糊匹配的三种方式及效率问题
SQL中Truncate的用法
sqlserver 多表关联时在where语句中慎用tri
链接服务器读取Mysql---出现消息 7347,级别
SQL Server解惑——为什么你拼接的SQL语句换
MySQL视图了解一下
laf.js - 开源的云开发框架(README.md)
javascript创建对象
Node.js 源码分析 - 从 main 函数开始
Node.js 源码分析 - 原生模块(C++模块)的注册
ECharts图标中用的js相关的处理方法
GoJS 使用笔记
单元测试 - 测试场景记录
Node.js 源码分析 - 加载 js 文件
ES6入门
聊聊动效降级