vue-router 二级路由
/**
* 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 二级路由的更多相关文章
- Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- vue之二级路由
router-view : <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件 一 样式 1 在一个vue组件,<template>& ...
- Vue router 一个路由对应多个视图
使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...
- Vue router 全局路由守卫
记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...
- vue router动态路由
<div id="#app"> <router-link to="/user/header">路由1</router-link&g ...
- vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错
首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
随机推荐
- JAVA多线程之CountDownLatch
前序: 上周测试给开发的同事所开发的模块提出了一个bug,并且还是偶现. 经过仔细查看代码,发现是在业务中启用了多线程,2个线程同时跑,但是新启动的2个线程必须保证一个完成之后另一个再继续运行,才能消 ...
- c++(堆排序)
堆排序是另外一种常用的递归排序.因为堆排序有着优秀的排序性能,所以在软件设计中也经常使用.堆排序有着属于自己的特殊性质,和二叉平衡树基本是一致的.打一个比方说,处于大堆中的每一个数据都必须满足这样一个 ...
- 拿到List<Map<String,String>>对用属性的值。。。。。。。
list.get(i).get("orderNumber") 来拿到下面的对应属性的值
- the method of validate slow
- 最小生成树之Prim算法
描述 最近,小Hi很喜欢玩的一款游戏模拟城市开放出了新Mod,在这个Mod中,玩家可以拥有不止一个城市了! 但是,问题也接踵而来--小Hi现在手上拥有N座城市,且已知这N座城市中任意两座城市之间建造道 ...
- Spark算子--map和flatMap
map和flatMap--Transformation类算子 代码示例 result
- 关于将dede织梦data目录迁移出web目录
关于将dede织梦data目录迁移出web目录织梦官方提供了一个教程,但是如果你是按照他们提供的教程做的话会出现很多问题.比如验证码问题,图片显示问题等等一大堆.织梦官方这种是很不负责任的,因为那个教 ...
- 自学python Day01
What is Python 1. 面向对象的解释行语言 2. 非常丰富的库 3. 使用制表符作为语句缩进 (white space) 优点: 1. 免费.开源 2. 可扩展性.可嵌入性 3. 非常丰 ...
- Centos7-卸载自带的jdk 安装jdk8
卸载JDK Centos7一般都会带有自己的openjdk,我们一般都回用oracle的jdk,所以要卸载 步骤一:查询系统是否以安装jdk #rpm -qa|grep java 或 #rpm ...
- express官网学习笔记
npm init 创建一个package.json npm install express --save-dev 安装到项目依赖 便于多人开发 路由结构定义 app.METHOD(PATH, HAND ...