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其中的奥妙了,接下来我 ...
随机推荐
- J2SE 8的流库 --- 收集处理结果
分类:简单计算, 收集到映射表中 , 群组和分组, 下游收集器, 约简操作 reduce() ArrayList<String> arrayList = new ArrayList< ...
- mysqldump: Got error: 1066: Not unique table/alias
mysqldump: Got error: 1066: Not unique table/alias myql 导出时提示如下: [root@localhost mysql]# mysqldump ...
- vc/vs开发的应用程序添加dump崩溃日志<转>
原贴地址:https://blog.csdn.net/wangkui1331/article/details/78029940 vc/vs开发的应用程序出现崩溃的时候,由于没有任何记录,导致开发人员很 ...
- javascript的DOM操作获取元素
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- Android 设备，如何root，执行adb shell，查看设备中的数据库信息等【转】
原文地址: Android 设备,如何root,执行adb shell,查看设备中的数据库信息等
- 基于Java SE集合的图书管理系统
图书管理系统一.需求说明1.功能:登录,注册,忘记密码,管理员管理,图书管理.2.管理员管理:管理员的增删改查.3.图书管理:图书的增删改查.4.管理员属性包括:id,姓名,性别,年龄,家庭住址,手机 ...
- mysql游标错误
DECLARE done INTEGER DEFAULT 0;DECLARE cur CURSOR FOR SELECT f_time,f_value FROM this_yc201508;DECLA ...
- C# 图像处理:记录图像处理时间的一个类
class HiPerTimer { [DllImport("user32.dll")] static extern bool GetLastInputInfo(ref LASTI ...
- 慕容小匹夫 Unity3D移动平台动态读取外部文件全解析
Unity3D移动平台动态读取外部文件全解析 c#语言规范 阅读目录 前言: 假如我想在editor里动态读取文件 移动平台的资源路径问题 移动平台读取外部文件的方法 补充: 回到目录 前言: 一 ...
- QuickSand图片点击后分裂成几份消失效果《IT蓝豹》
QuickSand图片点击后分裂成几份消失效果 QuickSand图片点击后分裂成几份消失效果,适合做图片退出和剪切效果.同时也可以学习android动画. demo中都封装好几个功能类,主要动画实现 ...