<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div> <!-- 模板抽离出来 -->
<template id="home">
<!-- 注意:组件只能有一个根元素,所以我们包装到这个div中 -->
<div>
<h2>首页</h2>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/reg">注册</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template> <template id="news">
<div>新闻</div>
</template> <template id="login">
<div>登录界面</div>
</template>
<template id="reg">
<div>注册界面</div>
</template> <script type="text/javascript">
// 1. 定义(路由)组件。
const Home = { template: '#home' };
const News = { template: '#news' }; const Login = { template: '#login' };
const Reg = { template: '#reg' }; // 2. 定义路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News}
] // 3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
}) // 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#box') // 现在,应用已经启动了!
</script>
</body>
</html>

展示结果:

关键点:

vue.js路由嵌套的更多相关文章

  1. vue.js路由嵌套传参

    通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,

  2. vue学习路由嵌套

    1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...

  3. vue.js路由vue-router

    学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...

  4. vue.js路由vue-router(一)——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  5. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  6. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  7. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  8. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  9. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

随机推荐

  1. MFC鼠标键盘消息处理

    void CMainWindow::OnKeyDown(UINT nChar, UINT nRepCnt, UINT nFlags ){ )&&(GetKeyState(VK_LBUT ...

  2. mysql应用基本操作语句(转)

    二.库操作 1..创建数据库 命令:create database <数据库名> 例如:建立一个名为xhkdb的数据库 mysql> create database xhkdb; 2 ...

  3. leetcode429

    这道题目是属于树的层次遍历,使用两层的队列非空判断. class Solution { public: vector<vector<int>> levelOrder(Node* ...

  4. C#windows窗体应用程序如何自适应大小

    用C#的windows窗体应用程序做界面十分轻松,但是系统默认是没有让控件跟随窗体的大小改变而已改变的.所以需要我们手动去设置让窗体控件随着窗体的大小改变而改变.所以我们只需要将控件选择 然后把Anc ...

  5. spring-boot 热加载实现替换Jrebel

    导读: 本文主要说说,在玩spring-boot时,我们经常要遇到重启服务这种浪费时间的事情,为了割掉这个痛点,我们一般有2中方式实现. 一个是springload , 另外一个是 spring-bo ...

  6. 读书笔记<深入理解JVM>01 关于OutOfMemoryError 堆空间的溢出

    代码片段如下: package com.gosaint.shiro; import java.util.ArrayList; import java.util.List; public class H ...

  7. 去除Activity上面的标题边框

    实现方法:1.在代码中实现:在此方法setContentView(R.layout.main)之前加入:requestWindowFeature(Window.FEATURE_NO_TITLE);标题 ...

  8. 【总结整理】AMAP学习AMAP.PlaceSearch()

    http://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch http://lbs.amap.com/api/j ...

  9. phper 需要学习js

  10. [转]SQL 模糊查询

      在进行数据库查询时,有完整查询和模糊查询之分. 一般模糊查询语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,% :表 ...