Vue一级路由与二级路由/路由重定向

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 记得先导包 --><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body><!-- Vue的作用域 --><div id="box"><ul><li><router-link to="/home">首页</router-link></li><li><router-link to="/news">新闻</router-link></li><li><router-link to="/hot">热点</router-link></li></ul><router-view></router-view></div><!-- 自定义组件模板 --><!-- 首页 --><template id="home"><div><h3>首页</h3></div></template><!-- 新闻,定义二级路由 --><template id="news"><div><h3>新闻</h3><!-- 二级路由的路径必须有一级路由原路径再+自身的路径 --><router-link to="/news/file">新闻文件</router-link><router-link to="/news/msg">新闻说明</router-link><!-- 二级路由显示的地方 --><router-view></router-view></div></template><!-- 热点 --><template id="hot"><div><h3>热点</h3></div></template><script>//绑定组件模板var Home=Vue.extend({template:"#home"});var News=Vue.extend({template:"#news"});var Hot=Vue.extend({template:"#hot"});/*把组件模板和地址对应起来*/var routes=[{path:"/home",component:Home}, //home{path:'/news',component:News,//配置二级路由(层层嵌套)children:[//第一个二级路由file页面(注意：二级路由的path不能有"/"){path:"file",component:{template:"<div>新闻文件详情页哦</div>"}},//二级路由第二个地址(注意：二级路由的path不能有"/"){path:"msg",component:{template:"<div>新闻说明页二级路由哦</div>"}}]}, //news{path:'/hot',component:Hot}];var router=new VueRouter({routes:routes});var vm=new Vue({el:"#box",router:router});</script>
</body>
</html>

this.$router.push('/home');

Vue一级路由与二级路由/路由重定向相关推荐

vue项目的一级路由和二级路由的理解
vue项目的一级路由和二级路由的理解
vue的一、二级路由、路由导航、路由模式、404、
路由通过路由就可以让我们的vue项目完成页面之间的跳转同时展示多个页面路由-可以实现SPA(单页面应用)只有一个html页面的应用模拟多个页面的跳转传统项目如果想完成多个页面那么就要几 ...
有关于路由的基础使用（一级路由和二级路由）
一.路由 1.定义 node中的路由:web服务器根据用户输入的不同url地址,来返回不同的页面. vue中路由:路由是vue.js中的一个路由组件,需要结合组件来实现单页面应用. 2.路由的使用(一 ...
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
vue嵌套路由，二级路由使用介绍
vue-router 嵌套路由,二级子路由项目中如果都是一级路由,路由管理会有些乱.嵌套路由是路由中包含路由的意思,组件中可以有自己的路由导航和路由容器(router-link.router-vie ...
以太网速率怎么手动设置_OPENWRT-KOOLSHARE软路由，一级/单臂/二级/旁软路由设置单臂路由联网教程...
[此文原创]此文基于单口软路由讨论一级/单臂路由 LAN:IPV4设置除192.168.1.1之外和你局域网不冲突的地址,关闭桥接接口,物理设置eth0 WAN:协议改成PPPOE,物理设置eth0 ...
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析问题解决结语前言众所周知,Vue路由有两种模式,默认hash模式,这种模式下url上会带"#&q ...
vue系统权限(动态加载路由方式)
目录 1.注册vue-router 2.声明默认路由和权限路由 3.用vuex实现全局登录.退出登录等方法 4.用vuex模块单独写权限路由的判断 5.监听路由跳转实现动态加载权限菜单需要用到动 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一.路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一: (1) 参数配置: { path : 'xx/:参数变量' ...

Vue一级路由与二级路由/路由重定向

Vue一级路由与二级路由/路由重定向相关推荐

最新文章

热门文章