/**
* 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. Codeforces Round #280 (Div. 2)_C. Vanya and Exams

    C. Vanya and Exams time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  2. nodeJs文件系统(fs)与流(stream)

    一.简介 本文将介绍node.js文件系统(fs)和流(stream)的一些API已经参数使用情况. 二.目录 文件系统将介绍以下方法: 1.fs.readFile 2.fs.writeFile 3. ...

  3. Spider_Man_2 の requests模块

    一:自我介绍

  4. TypeScript笔记 3--基础类型

    强类型是TypeScript值得称赞的特性,对于很多后端开发者来说是绝对的福利,加上静态检查使得我们可以在开发态就可以发现很多问题. TypeScript中的类型和JavaScript差不多,下面我们 ...

  5. insertBefore方法(javascript与jQuery)

    说到insertBefore()方法,其实javascript与jQuery中都有此方法,那么他们用法是否相同呢? 其实,还是有点区别的.反正我是爱搞混淆了,先做个小笔记吧! 1.insertBefo ...

  6. Linux中安装opencv-3.3.1

    在ubuntu16.04中安装opencv3.3.1的过程中踩了许多坑.一开始直接安装还挺顺利但运行程序时总是提示libgtk2.0-dev和pkg-config没有安装,在安装这两个包的过程中也不顺 ...

  7. Spark算子--mapValues

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/ccc9d6b5c46ac7209c1e104bd219bfb4.html mapValues--Transfo ...

  8. php备份数据库类分享

    本文实例讲述了php实现MySQL数据库备份类.分享给大家供大家参考.具体分析如下:这是一个非常简单的利用php来备份mysql数据库的类文件,我们只要简单的配置好连接地址用户名与数据库即可   ph ...

  9. 如何把域名解析到网站空间IP上?

    建立网站首要就是要有一个域名和网站空间,怎么把这两者联系在一起呢?这就要通过域名解析,把域名指向空间的IP,让我们能够通过域名访问网站空间.通过域名解析把我们容易记住的域名转化成IP地址,由DNS服务 ...

  10. dedecms中{dede:myad name='about'/} 修改内容

    网站首页index.htm中调用这个命令,显示一段文字,但是想要修改内容.所以想知道这个命令指定的文件内容在哪里寻找或者指定内容在哪里修改? 匿名 | 浏览 6036 次 发布于2014-02-19 ...