/**
* Created by 我 on 2017/12/4.
*/
import Vue from 'vue' //import导入 Vue(自己起的名) from 从 vue
import Vuerouter from 'vue-router' //引进路由
//使用vuerouter
Vue.use(Vuerouter);
//console.log(Vuerouter);
//创建局部组件
const Index={
template:`<div>
<h2>这是首页</h2>
<router-view></router-view>
</div>`,
//监听路由变化 to是去的路径 from是来的路径
watch:{
'$route'(to,from){
console.log(arguments);
console.log(to);
}
},
/*beforeRouteUpdate(to,from,next){
console.log(arguments);
console.log(next);
}*/
beforeRouteUpdate (to, from, next) {
console.log(arguments);
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
next()
},
};
const New={
template:`<div>
<h2>这是新闻</h2>
<router-view></router-view>
</div>`
};
const Zixun={
template:`<div>
<h2>这是资讯</h2>
<router-view></router-view>
</div>`,
//在调用时候没有访问到实例,但可以通过next对其访问
beforeRouteEnter (to, from, next) {
console.log(arguments);
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
next(vm=>{
console.log(vm);
})
}, beforeRouteLeave (to, from, next) {
console.log(arguments);
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
next()
}
};
const Hello={
template:`<h2>这是小首页</h2>` };
const Xnew={
template:`<h2>这是小新闻</h2>`
};
//实例路由
const router=new Vuerouter({
mode:"history", //mode模式 history h5里面的方法 hash
base:__dirname, // base 文件路径 相对路径 filename 绝对路径
routes:[ //路由配置
{path:"/index",/*redirect:"/new",*/alias: '/b', component:Index, //redirect为重定向命名
//alias为别名 『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?
///a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
children:[
//动态路由路径以冒号开头
{path:"/index/hello/:id",component:Hello},
{path:"/index/hello/:id",component:Hello}
]
}, //关联路由
{path:"/new",component:New,name:'new',
children:[ //二级路由
{path:"/new/xnew",component:Xnew },
]
},
{path:"/zixun",component:Zixun}, ]
});
//路由钩子
/*router.beforeEach((to, from, next) => { //全局的前置守卫
console.log(arguments);
//sessionStorage.setItem('user','')
//sessionStorage.getItem('user')
next()
});*/
new Vue({
el:"#app",
router, //开启路由
template:
`
<div>
<ul>
<li><router-link to="/index">这是首页</router-link>
<ol>
<li><router-link to="/index/hello/123">首页1</router-link></li>
<li><router-link to="/index/hello/234">首页2</router-link></li>
</ol></li>
<li><router-link to="/new">这是新闻</router-link>
<ol> <!-- 二级路由的内容-->
<li><router-link to="/new/xnew">这是小新闻</router-link></li>
</ol>
</li>
<li><router-link to="/zixun">这是资讯</router-link></li>
<router-view></router-view>
<ul>{{ $route.params.id }}</ul>
</ul> </div>
`
});

  

vue-router 二级路由的更多相关文章

  1. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  2. vue之二级路由

    router-view : <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件 一 样式 1 在一个vue组件,<template>& ...

  3. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  4. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  5. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  6. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  7. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  8. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  9. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  10. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

随机推荐

  1. Vjios P1736 铺地毯【暴力,思维】

    铺地毯 描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有n张地毯,编号从1到n.现在将这些地毯按照编号从小到大的顺序平行于坐标轴 ...

  2. [bzoj1806] [ioi2007]Miners 矿工配餐

    相当于noip前两题难度的ioi题........ 还是挺好想的...算是状压一下?...两个二进制位可以表示三种食物或者没有,所以用四个二进制位表示某个煤矿最近两餐的情况... 先把各种情况加上各种 ...

  3. grunt 插件开发注意事项

    grunt的插件机制 task.loadNpmTasks = function(name) { var root = path.resolve('node_modules'); var tasksdi ...

  4. 如何完成域名和ip地址的绑定

    首先,我们要知道什么是域名绑定,所谓域名绑定就是是指已选定的域名与服务器主机的空间绑定,实在是在域名注册查询上设置或者WEB服务器上设置,使一个域名被指导向一特定空间,从而使访问者访问你的域名的时候就 ...

  5. 一个简洁的PHP可逆加密函数(分享)

    http://www.jb51.net/article/38018.htm 本篇文章是对一个简洁的PHP可逆加密函数进行了详细的分析介绍,需要的朋友参考下   很多时候我们需要对数据进行加密解密,比如 ...

  6. PHPMailer发送邮件中文附件名是乱码

    可能使用了PHPMailer发送邮件的朋友带中文附件名时会出现乱码,下面我来介绍一个解决办法. 比如我们要发送的附件是"测试.txt",如果在添加附件的时候强制使用指定文件名的方式 ...

  7. 为什么选择.NETCore?

    为什么.NETCore? 学习新的开发框架是一项巨大的投资.您需要学习如何在新框架中编写,构建,测试,部署和维护应用程序.作为开发人员,有许多框架可供选择,很难知道什么是最适合的工作.即使您正在使用. ...

  8. J.U.C JMM. pipeline.指令重排序,happen-before

    pipeline: 现在的CPU一般采用流水线方式来执行指令.一个指令执行周期被分成:取值,译码,执行,访存,写会,更新PC若干阶段.然后,多条指令可以同时存在于流水线中,同时被执行,来提高系统的吞吐 ...

  9. CCF系列之ISBN号码(201312-2)

    试题名称: ISBN号码 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规 ...

  10. 如何用vue实现树形菜单?

    在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...