摘要:生态之是什么是的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容。
vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容。
vue-router.js 可以下载 也可以用cdn,基本配置信息看如下代码
// html 代码 <div id="app"> <div> <router-link to="/">首页router-link> <router-link to="/about">关于我们router-link> div> <div> <router-view>router-view> div> div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script src="https://unpkg.com/vue-router/dist/vue-router.js">script> <script src="../js/router_demo.js">script> // js 代码 var routes = [ { path: "/", component: { template: `<div><h1>首页h1>div>` } }, { path: "/about", component: { template: `<div><h1>关于我们h1>div>` } } ] var router = new VueRouter({ routes: routes, // 路由去掉# // mode: history, }); var app = new Vue({ el: #app, router: router, });
// html 代码 <div id="app"> <div> <router-link to="/">首页router-link> <router-link to="/about">关于我们router-link> <router-link to="/user/琴女?age=20">琴女router-link> <router-link to="/user/提莫">提莫router-link> div> <div> <router-view>router-view> div> div> // js 代码 var routes = [ { path: "/", component: { template: `<div><h1>首页h1>div>` } }, { path: "/about", component: { template: `<div><h1>关于我们h1>div>` } }, { path: "/user/:name", component: { template: `<div> <h1>我是:{{$route.params.name}}h1> <h1>我年龄是:{{$route.query.age}}h1> div>`, } } ] var router = new VueRouter({ routes: routes, }); var app = new Vue({ el: #app, router: router, });
<div id="app"> <div> <router-link to="/">首页router-link> <router-link :to="{name: about}">关于我们router-link> <router-link to="/user/gaoxin?age=19">gaoxinrouter-link> div> <div> <router-view>router-view> div> div> // js代码 let routes = [ { path: /, component: { template: `<h1>这是主页h1>` } }, { path: "/about", name: "about", component: { template: `<h1>关于我们h1>` } }, { path: "/user/:name", component: { template: `<div> <h1>我是{{$route.params.name}}h1> <h2>我的年龄是{{$route.query.age}}h2> div> ` } } ]; let router = new VueRouter({ routes: routes, mode: "history" }); const app = new Vue({ el: "#app", router: router, mounted(){ console.log(this.$route) console.log(this.$router) } })
// 添加子路由变化的只有父级路由 // 基于上面的例子增加 // js 代码 { path: "/user/:name", component: { template: `<div> <h1>我是:{{$route.params.name}}h1> <h1>我年龄是:{{$route.query.age}}h1> <router-link to="more" append>更多信息router-link> <router-view>router-view> div>`, }, children: [ { path: "more", component: { template: `<div> {{$route.params.name}}的详细信息 div>`, } } ] },
// 基于上面例子追加 // html 代码 <div id="app"> <div> <router-link to="/">首页router-link> <router-link to="/about">关于我们router-link> <router-link to="/user/琴女?age=20">琴女router-link> <router-link to="/user/提莫">提莫router-link> // 添加一个button按钮 <button @click="on_click">旅游button> div> <div> <router-view>router-view> div> div> // js 代码 // 注意路由name的使用 这是在原例子追加 var app = new Vue({ el: #app, router: router, methods: { on_click: function () { setTimeout(function () { this.$router.push(/about) setTimeout(function () { this.$router.push({name: "user", params:{name: "琴女"},query:{age: 20}}) }, 2000) }, 2000) } } });
命名路由视图 router-view
当我们只有一个
如果是content 和 footer 就需要同时显示并且不同区域~这就需要对视图进行命名~
// html 代码 <div id="app"> <div> <router-link to="/">首页router-link> div> <div> <router-view name="content" class="content-view">router-view> <router-view name="footer" class="footer-view">router-view> div> div> // js 中的主要代码 var routes = [ { path: "/", components: { content: { template: `<div><h1>首页h1>div>`, }, footer: { template: `<div><h1>关于我们h1>div>`, } } }, ]
let routes = [
{
path: "**",
redirect: "/"
}
]
-- $route为当前router调转对象,里面可以获取name, path, query, params等~
-- $router为VueRouter实例,有$router.push方法等~~
路由的生命周期就是从一个路由跳转到另一路由整个过程,下面介绍两个钩子~
router.beforeEach() router.afterEach() 详情请看代码
// html 代码 <div id="app"> <router-link to="/">首页router-link> <router-link to="/login">登录router-link> <router-link to="/user">用户管理router-link> <div> <router-view>router-view> div> div> // js 代码 var routes = [ { path: "/", component: { template: "<h1>首页h1>" } }, { path: "/login", component: { template: "<h1>登录h1>" } }, { path: "/user", component: { template: "<h1>用户管理h1>" } } ]; var router = new VueRouter({ routes: routes }); router.beforeEach(function (to,from,next) { // console.log(to) // console.log(from) // console.log(next) // next(false) if(to.path=="/user"){ next("/login") } else { next(); } }); router.afterEach(function (to, from) { console.log(to) console.log(from) }); var app = new Vue({ el: #app, router: router });
next:function 一定要调用这个方法来resolve这个钩子函数。
执行效果依赖next方法的调用参数
next() 什么都不做继续执行到调转的路由
next(false) 中断当前导航 没有跳转 也没有反应
next("/") 参数是路径 调转到该路径
next(error) 如果next参数是一个Error实例 导航终止该错误
会传递给router.onError()注册过的回调中
如果/user下面还有子路由的情况下会怎么样呢~????
// 匹配子路由 改一下匹配方法就可以~ // js 改动代码 router.beforeEach(function (to,from,next) { // console.log(to) // console.log(from) // console.log(next) // next(false) if(to.matched.some(function (item) { return item.path == "/post" })){ next("/login") } else { next(); } }); // 元数据配置 改动代码 // html 部分 { path: "/user", meta: { required_login: true, }, component: { template: ` <div> <h1>用户管理h1> <router-link to="vip" append>viprouter-link> <router-view>router-view> div> ` }, children: [{ path: "vip", meta: { required_login: true, }, component: { template: <h1>VIPh1> } }] } // js 部分 router.beforeEach(function (to,from,next) { // console.log(to) // console.log(from) // console.log(next) // next(false) if(to.meta.required_login){ next("/login") } else { next(); } });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1530.html
摘要:前端技术栈还是非常庞大的,为了能够借助已经存在的轮子来造出一辆车,所以我选择了进行实践。状态的管理的状态管理依靠完成,用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面,可以打开任何一个云主机系统的页面看,基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...
摘要:前端技术栈还是非常庞大的,为了能够借助已经存在的轮子来造出一辆车,所以我选择了进行实践。状态的管理的状态管理依靠完成,用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面,可以打开任何一个云主机系统的页面看,基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...
摘要:导语承接上文实战之后台管理系统开发一在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了。如果传入的数据不符合规格,会发出警告。 1. 导语 承接上文:Vue 2.x 实战之后台管理系统开发(一) 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了。在开...
摘要:样式通过标签包裹,默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加,如要引入外部文件,首先需给项目安装依赖包,打开,进入项目目录,输入回车。 showImg(https://segmentfault.com/img/remote/1460000013235090); (一)安装node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/...
阅读 713·2023-04-25 19:43
阅读 3910·2021-11-30 14:52
阅读 3784·2021-11-30 14:52
阅读 3852·2021-11-29 11:00
阅读 3783·2021-11-29 11:00
阅读 3869·2021-11-29 11:00
阅读 3557·2021-11-29 11:00
阅读 6105·2021-11-29 11:00