Vue之VueRouter
Vue之VueRouter实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
<script>
let oDiv = document.getElementById('app'); window.onhashchange = function () { # onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）
switch (location.hash) {
case '#/login':
oDiv.innerHTML = `<h1>这是登录页面</h1>`;
break;
case '#/register':
oDiv.innerHTML = `<h1>这是注册页面</h1>`;
break;
default:
oDiv.innerHTML = `<h1>这是首页</h1>`;
break;
}
}
</script>
</body>
</html>
Vue之VueRouter安装使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
}; let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`,
}; let Register = {
template: `
<div>
<h1>这是注册页面</h1>
</div>
`,
}; let App = {
// 4.第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 5.第五步，router-view是页面内容的渲染出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link> <router-view></router-view>
</div>
`,
}; // 2.第二步实例化一个VueRouter对象
// 本质上是将路径和页面内容绑定了对应关系
let router = new VueRouter({
routes: [
{
path: '/',
// 注册Home
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
},
],
}); new Vue({
el: '#app',
template: `<App/>`,
// 3.第三步，在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
</html>
Vue之VueRouter命名路由
let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登录</router-link>
<router-link :to="{ name: 'register' }">注册</router-link>
<router-view></router-view>
</div>
`,
};
let router = new VueRouter({
routes: [
{
name: 'home', // 新增的
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
},
]
});
// 其他的和上一个安装使用一样
Vue之VueRouter路由参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
}; let userParams = {
template: `
<div>
<h1>这是用户一的信息</h1>
</div>
`,
}; let userQuery = {
template: `
<div>
<h1>这是用户二的信息</h1>
</div>
`,
}; let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: { userId: 1 } }">登录</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link> <router-view></router-view>
</div>
`,
}; let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'userParams',
path: '/user/:userId',
component: userParams,
},
{
// xxx/?userId=1 这是路径显示
name: 'userQuery',
path: '/user',
component: userQuery,
},
]
}); new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
}; let Courses = {
template: `
<div>
<h1>这是课程页面</h1>
<router-link to="lightcourses">轻课</router-link>
<router-link to="degreecourses">学位课</router-link> <router-view></router-view>
</div>
`,
}; let LightCourses = {
template: `
<div>
<h1>这是轻课页面</h1>
</div>
`,
}; let DegreeCourses = {
template: `
<div>
<h1>这是学位课程页面</h1>
</div>
`,
}; let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'courses' }">课程页面</router-link> <router-view></router-view>
</div>
`,
}; let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'courses',
path: '/courses',
component: Courses,
children: [
{
path: 'lightcourses',
component: LightCourses,
},
{
path: 'degreecourses',
component: DegreeCourses,
}
]
},
]
}); new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由append版
<router-link to="lightcourses" append >轻课</router-link> // 加append
Vue之VueRouter子路由append升级版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
}; let Courses = {
template: `
<div>
<h1>这是课程页面</h1>
<router-link :to="{ name: 'lightcourses' }">轻课</router-link>
<router-link :to="{ name: 'degreecourses' }">学位课</router-link> <router-view></router-view>
</div>
`,
}; let LightCourses = {
template: `
<div>
<h1>这是轻课页面</h1>
</div>
`,
}; let DegreeCourses = {
template: `
<div>
<h1>这是学位课程页面</h1>
</div>
`,
}; let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'courses' }">课程页面</router-link> <router-view></router-view>
</div>
`,
}; let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'courses',
path: '/courses',
component: Courses,
children: [
{
name: 'lightcourses',
path: 'lightcourses',
component: LightCourses,
},
{
name: 'degreecourses',
path: 'degreecourses',
component: DegreeCourses,
}
]
},
]
}); new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由重定向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
}; let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`,
}; let Pay = {
template: `
<div>
<h1>这是支付页面</h1>
</div>
`,
}; let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登录</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link> <router-view></router-view>
</div>
`,
}; let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'login',
path: '/login',
component: Login,
},
{
// xxx/1 这是路径显示
name: 'pay',
path: '/pay',
redirect: '/login', // 重定向点击支付还是跳转登录页面
component: Pay,
},
]
}); new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由的钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
}; let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`,
}; let Pay = {
template: `
<div>
<h1>这是支付页面</h1>
</div>
`,
}; let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登录</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link> <router-view></router-view>
</div>
`,
}; let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'login',
path: '/login',
component: Login,
},
{
// xxx/1 这是路径显示
name: 'pay',
path: '/pay',
meta: { required_login: true },
component: Pay,
},
]
}); // 通过router对象的beforeEach（function（to，from，next））
router .beforeEach(function (to, from, next) {
if (to.meta.required_login){
next('/login');
}else{
next();
}
}); new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由去掉井号
let router = new VueRouter({
mode: 'history', // 新加的去掉井号的内容
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'login',
path: '/login',
component: Login,
},
{
// xxx/1 这是路径显示
name: 'pay',
path: '/pay',
meta: { required_login: true },
component: Pay,
},
]
});
$route和$router的区别
$route 表示(当前路由信息对象)
**1.$route.path**
字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
**2.$route.params**
一个 key/value 对象，包含了 动态片段 和 全匹配片段，
如果没有路由参数，就是一个空对象。
**3.$route.query**
一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 $route.query.user == 1，
如果没有查询参数，则是个空对象。
**4.$route.hash**
当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
**5.$route.fullPath**
完成解析后的 URL，包含查询参数和 hash 的完整路径。
**6.$route.matched**
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
**7.$route.name 当前路径名字**
**8.$route.meta 路由元信息
$router全局的路由实例，是router构造方法的实例
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }}) // 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退 //push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
<router-link to="/05" replace>05</router-link>
// 一般使用replace来做404页面
this.$router.replace('/')
push方法其实和<router-link :to="...">是等同的。
注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
Vue之VueRouter的更多相关文章
- 我的音乐盒子（nodejs7 + koa2 + vue + vuex + vue-router）
你们知道的,nodejs对jser来说,是个好东西,快快的,自从接触nodejs后,总想弄点东西. 这弄个啥了,一天打开百度音乐盒,哟,自己弄一个如何了,好啊好啊. 后台: nodejs 7 + ko ...
- use vue vuex vue-router, not use webpack
vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...
- [ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统
好久没写文字了,当然大家也不期待嘛,反正看代码就行了. 演示网站 首先说下这个项目吧. 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架. 我们先来看看首页吧 ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- vue路由vue-router的使用
对于单页应用,官方提供了vue-router进行路由跳转的处理. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种 ...
- 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面
一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...
- Vue基础---->vue-router的使用(一)
用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js 时,我们就已经把组件组合成一个应用了,当你要把 vue-router 加进来,只需要配置组件和路由映射,然后 ...
- vuejs学习——vue+vuex+vue-router项目搭建(三)
前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...
- vuejs学习——vue+vuex+vue-router项目搭建(二)
前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...
随机推荐
- python大法好——
1.字符串 字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. Python的字符串内建函数 Python 的字符串常用内建函数如下: 1.大小写转换: & ...
- du 统计文件夹大小
du -h --max-depth=1 |grep [TG] |sort #查找上G和T的目录并排序 du -sh #统计当前目录的大小,以直观方式展现 du -h --max-depth= ...
- redis开启外网访问
redis默认只允许本地访问,要使redis可以远程访问可以修改redis.conf 打开redis.conf文件在NETWORK部分有说明 ######################### ...
- java web项目使用IDEA打成war包
步骤: 1.点击 File -->Project Structure...如下图: 2.出现如下界面后点击 Artifacts--> 绿色加号-->Web Application:A ...
- curator 实现分布式一致性锁
最近准备在项目中引入分布式锁,故而研究基于zookeeper的curator框架. 网上资料不多,自己研究其源码发现,这个框架已经帮我做了很多现成的实现. 下面介绍下锁的实现: 通过源码中Lockin ...
- html 基础之a标签的属性target解析
学习前端,有很多标签其实有很多不同的功能,但是用到的不多,所以就没有发现:当发现的时候,觉得很不可思议,有耳目一新的感觉.例如a 标签,之前只是知道,使用a标签,可以打开一个链接,然后访问一个新的页面 ...
- 2018SDIBT_国庆个人第五场
A - ACodeForces 1060A Description Let's call a string a phone number if it has length 11 and fits th ...
- java-部分精选面试题
JVM的类加载机制是什么?有哪些实现方式? 类加载机制: 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法去内,然后在堆区创建一个java.lang.Clas ...
- 使用sigaction函数
sigaction函数 修改信号处理动作(通常在Linux用其来注册一个信号的捕捉函数) :失败:-1,设置errno 参数: act:传入参数,新的处理方式.oldact:传出参数,旧的处理方式. ...
- Graylog日志管理系统---搜索查询方法使用简介
Elasticsearch 是一个基于 Lucene 构建的开源.分布式.提供 RESTful 接口的全文搜索引擎 一.Search页面的各位置功能介绍: 1.日志搜索的时间范围 为了使用方便,预设有 ...