Vue路由嵌套
Vue路由嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嵌套路由</title>
</head>
<body>
<div id="app"> </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
Vue.use(VueRouter);
// 声明组件路由
var Son1={
template:`
<h1>我是子组件1</h1>
`
};
var Son2={
template:`
<h1>我是子组件2</h1>
`
}; // 创建路由对象
var Home={
template:`
<div>
首页内容
<br />
<router-link to='/home/son1'>组件1</router-link>
<router-link to='/home/son2'>组件2</router-link>
<router-view></router-view>
</div>
`
}; // 命名路由
var router=new VueRouter({
// 配置路由对
routes:[
// 路由匹配规则
{
// 动态路由参数，以冒号开头
path:'/home',
name:'home',
// 响应组件
component:Home,
// 路由嵌套
children:[
{
//以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，
主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path。
path:'son1',
component:Son1
},
{
path:'son2',
component:Son2
}
]
}
] }); var App={
template:`
<div>
<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
<router-link :to = "{name:'home'}">首页</router-link> <!--路由组件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
template:`<App />`,
router:router,
components:{
App
}
}) </script>
Vue路由嵌套的更多相关文章
- vue 路由嵌套 及 router-view vue-router --》children
vue 路由嵌套 vue-router -->children 在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...
- vue 路由嵌套高亮问题
正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: //主路由通过v-for循环出来 <div class="list- ...
- vue教程3-06 vue路由嵌套(多层路由)，路由其他信息
多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Vue路由嵌套和命名视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue路由--嵌套路由
静态嵌套路由: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue路由嵌套，vue動態路由
https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...
- 关于vue路由嵌套遇到的坑~
关键在于子路由中的path问题,path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue路由嵌套，对应展示的视图
- vue学习路由嵌套
1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...
随机推荐
- 整理Mac系统 node-sass 安装失败的原因及解决办法
转载与:https://segmentfault.com/a/1190000010984731 声明:本文非原创,如有侵权请留言或发邮件告知,作者会立即停止侵权并删除本文.发布此文章主要是希望跟作者遇 ...
- opengl版本
OpenGL vendor string: IntelOpenGL renderer string: Intel(R) HD Graphics 630OpenGL version string: 4. ...
- thymeleaf中分类信息使用不同的样式
需求: 相关class类名:S224_on_point url:/notification/list url:/notification/list?type=2 thymeleaf代码如下: < ...
- js下利用userData实现客户端保存表单数据
对于多数网页制作的朋友,实现在客户端保存在网页表单上的信息,比较多的是采用Cookie技术来实现,这些功能例如:下拉列表框选择的选项,文本框输入的数据等. 事实上,我们可以利用微软DHTML默认行为中 ...
- MySQL学习笔记——MySQL5.7的启动过程（一）
MySQL的启动函数在 sql/main.cc 文件中. main.cc: extern int mysqld_main(int argc, char **argv); int main(int ar ...
- zabbix3.4配置windowsAD登录
转载自:[https://zabbix.com/documentation/3.4/zh/manual/web_interface/frontend_sections/administration/a ...
- 第二十三章 多项目集中权限管理及分布式会话——《跟我学Shiro》
二十三章 多项目集中权限管理及分布式会话——<跟我学Shiro> 博客分类: 跟我学Shiro 跟我学Shiro 目录贴:跟我学Shiro目录贴 在做一些企业内部项目时或一些互联网后台时 ...
- vscode常用插件小结
工欲善其事,必先利其器. 个人用过的代码编辑器有sublime,webstrom,vscode,H5builder.综合比较下来还是更倾向于vscode. sublime是一款轻量级的编辑器,优点是启 ...
- Vue项目过程中遇到的小问题
1.给router-link添加点击事件 <router-link to="" @click.native=""></router-link& ...
- Java中让fastJson识别Colloction和Map中的泛型类
由于fastJson的高效性,最近采用fastJson来做序列化并存储数据,但出现了一个麻烦的问题,如果将Map<K,V>这样的类型序列化,反序列化就会不尽人意,有以下尝试: 使用JSON ...