VueRouter
使用VueRouter的前提:
1, 必须导入vue-router.js文件
2, 要有VueRouter()实例
3, 要把VueRouter实例挂载到Vue实例中
4, 路由的入口
<router-link to='/index'>index页面</router-link>
5, 路由的出口
<router-view></router-view>
第一个VueRouter实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<!--路由的入口-->
<!--里面必有这个to="路径" 属性-->
<router-link to="/index">index页面</router-link>
<router-link to="/home">home页面</router-link>
<hr>
<!--路由的出口-->
<router-view></router-view>
</div>
</body>
<script src="vue.js"></script>
<script src="VueRouter.js"></script>
<script>
//写路由
const routes = [
{
path:"/index",
component:{
template:`<div>
<h1>这是index页面</h1>
</div>`,
},
},
// 每一个路由都是一个对象,属性是path:对应的是路径
// component:里面是template 里的内容将会挂载到页面上。
{
path:"/home",
component:{
template:`<div>
<h1>这里是home页面</h1>
</div>`,
}
}
];
// 生成VueRouter示例
const router_obj = new VueRouter({
routes:routes
});
var app = new Vue({
el:"#d1",
data:{},
router:router_obj // 将路由实例挂载到Vue实例中
})
</script>
</html>
路由的模糊匹配:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<router-link to="/user/清秋?age=17">清秋页面</router-link>
<router-link to="/user/小白?age=17">小白页面</router-link>
<!-- ?后跟的会存到一个query中,后面只需要从query中调取就可以了-->
<hr>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="VueRouter.js"></script>
<script>
const routes = [
{
path:"/user/:name",
// :后跟的就是模糊查询的,类似于正则
component:{
template:`<div>
<h1>这里是{{$route.params.name}}的主页页面!</h1>
<p>他{{$route.query.age}}岁</p>
</div>`,
}
},
];
//生成VueRouter实例
const router_obj = new VueRouter({
routes:routes
});
var app = new Vue({
el:"#d1",
data:{},
router:router_obj //将路由实例挂载到Vue实例中
})
</script>
</body>
</html>
子路由:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<router-link to="/index/qingqiu">清秋的主页</router-link>
<hr>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="VueRouter.js"></script>
<script>
const routes = [
{
path:"/index/:name",
component:{
template:`<div>
<h1>这里是{{$route.params.name}}的主页</h1>
<hr>
<router-link to="info" append>他喜欢的music</router-link>
<hr>
<router-view></router-view>
</div>`,
// 在父路由里写上子路由的的链接 标签属性里加上append:可以在原有路径的后面追加路径信息
},
children:[
{
path:"info",
component:{
template:`<div>
<h1>忘记时间</h1>
<p>沉默着,走了有,多遥远</p>
</div>`,
}
}
],
},
];
const router_obj = new VueRouter({
routes:routes
});
var app = new Vue({
el:"#d1",
data:{},
router:router_obj,
})
</script>
</body>
</html>
VueRouter的更多相关文章
- Vue-Router 页面正在加载特效
Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
- vue-router(2.0)
用Vue.js+vue-router创建单页应用是比较简单的.使用Vue.js时,我们就已经把组件组合成一个应用了,当你要把vue-router加进来,只要配置组件和路由映射,然后告诉vue-rout ...
- vue-router
官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本) ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
- vue-router 创建 vue 单页应用示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Vuejs] 关于vue-router里面的subRoutes
刚学习vue,可能有使用不对的地方,希望没有对大家造成困扰! 使用vue-router,为了能够更好的管理.vue文件,需要用到子路由. 先看个错误的例子 routers.js '/company': ...
随机推荐
- Phpstorm Alt+Enter 自动导入类
很方便!!!能够自动提示哪些类没有自动加载!!!然后Alt+Enter进行安装!!!
- nginx第三方模块安装方法
nginx第三方模块安装方法 ./configure --prefix=/你的安装目录 --add-module=/第三方模块目录 比如echo模块. 没安装前,使用测试. location /tes ...
- JavaScript--语法3--数组
JavaScript--语法3--数组 一.心得 二.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "h ...
- python批量修改ssh密码
由于工作需要本文主结合了excel表格,对表格中的ssh密码进行批量修改 以下是详细代码(python3): #!/usr/bin/env python#-*-coding:utf-8-*- impo ...
- 【原创】遇到:Invalid layout of java.lang.String at value 这样的问题,该怎么办呢?
Invalid layout of java.lang.String at value## A fatal error has been detected by the Java Runtime En ...
- TryUpdateModel方法 模型绑定
文档资料:https://msdn.microsoft.com/zh-cn/library/ee728634.aspx 有很多重载其中 Controller.TryUpdateModel<TMo ...
- CSS中em、rem和px的区别
任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...
- New Concept English Two 22 58
$课文56 比声音还快! 579. Once a year, a race is held for old cars. 旧式汽车的比赛每年举行一次. 580. A lot of cars enter ...
- mysql sql语句高级写法
将user表的内容,插入到team_member表INSERT INTO team_member (Nike,HeadImageUrl) SELECT Nike,HeadImageUrl FROM u ...
- CF1082D:Maximum Diameter Graph (简单构造)
Graph constructive problems are back! This time the graph you are asked to build should match the fo ...