前端学习(1520):vue-router嵌套路由
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<!-- 1引入插件的js -->
<!-- 2设置链接 -->
<!-- 3设立容器部分 -->
<!-- 4提供要渲染的组件 -->
<!-- 5配置路由 -->
<!-- 6挂载路由 -->
<style>li {list-style: none;}a {text-decoration: none;}.container {height: 100px;border: 1px solid #ccc;}
</style><body><div id="app"><ul><router-link to="/home" tag="li"><a>首页</a></router-link><router-link to="/top" tag="li"><a>热点</a></router-link><router-link to="/music" tag="li"><a>音乐</a></router-link></ul><router-view class="container"></router-view></div><router-view></router-view></div><script src="./js/vue.js"></script><script src="./js/vuerouter.js"></script><script>//获取不同的值//hash变化的时候触发该事件/* var div = document.getElementById('container');window.onhashchange = function() {console.log("-----");var hash = location.hash;console.log(hash);hash = hash.replace("#", '');switch (hash) {case '/aaa':div.innerHTML = "AAA";break;}} *///提供渲染组件var home = {template: `<div>home</div>`}var Top = {template: `<div>top</div>`}var music = {template: `<div><router-link to="/music/pop" tag="li"><a>流行</a></router-link><router-link to="/music/rock" tag="li"><a>摇滚</a></router-link><router-link to="/music/cal" tag="li"><a>古典</a></router-link><router-view class="container-sub"></router-view></div>`}var musicSub = {template: `<div>我是musicSub组件</div>`}//实例化路由var routes = [{name: 'home',path: '/home',component: home}, {name: 'top',path: '/top',component: Top}, {name: 'music',path: '/music',component: music,children: [{path: '/music/:id',component: musicSub}]}, ]var router = new VueRouter({routes})new Vue({el: '#app',//挂载使用对象router,data: {},methods: {}})</script></body></html>
运行结果
前端学习(1520):vue-router嵌套路由相关推荐
- vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
- Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战 前言 一.什么是单页面应用及实现前端路 ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局!
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- 你真的理解 Vue Router 的路由模式吗?
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- vue.js嵌套路由
文章目录 vue.js嵌套路由,如何使用? 总结说明: 效果图预览: 相关文件代码: 1. ```main.js```文件 2. ```app.vue```文件 3. ```header.vue``` ...
- Vue Router 命名路由、(嵌套)命名视图
命名路由 在Vue Router中 除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
- Web前端学习笔记20:Vue_路由_Vue Router_模块化的分类_babel_webpack_Element-UI
文章目录 第一阶段学习 1.路由的概念 2.前端路由的初体验 3.Vue Router简介 4.Vue Router的使用步骤(★★★) 5.嵌套路由,动态路由的实现方式 A.嵌套路由的概念(★★★) ...
- vue router children 路由变了 组件没变_Vue.js从零开始——路由(2)
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
- vue.js嵌套路由-------由浅入深
嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...
最新文章
- AI与人类围棋士的差距到底有多大?
- 不打擦边球、不搞黑线路能不能挣钱, 开始我是忐忑的
- Python、Lua和Ruby比较——脚本语言大P.K.
- java拉丁正方形_LeetCode JAVA解题---824. 山羊拉丁文
- 信息学奥赛一本通(1252:走迷宫)
- javascript_如何不再害怕JavaScript
- HDU 1012 u Calculate e(简单阶乘计算)
- HDU2072 单词数(解法二)【废除!!!】
- 强化学习(一)---马尔科夫决策过程
- Java程序员需要了解的几个开源协议介绍
- 拓端tecdat|windows中用命令行执行R语言命令
- 三极管饱和状态的判断
- ruby 安装bundler的方法
- mysql 嵌入式linux版本_PHP专栏 : MySQL 数据库安装详细
- 大学生怎样学习一门编程
- mac风扇控制_如何监视和控制Mac的风扇
- 【算法】【递归与动态规划模块】两个字符串的最长公共子数组
- linux内核max函数实现
- 主题和母版页(母版页)
- Promise.all等待方法执行完毕再执行
热门文章
- Boot loader: Grub入门(转)
- SPOJ 220 Relevant Phrases of Annihilation(后缀数组+二分答案)
- PHPmysqli的 预处理执行查询语句
- COJ1196(Staginner 去爬山)
- 全硬盘安装Win Vista 6000 RTM方法(转)
- 小米网关控制空调伴侣_小米有品上架移动空调,支持语音控制
- 弹出框 每次打开 滚动条置顶_微信置顶文字怎么弄?微信置顶一句话教程
- OpenCV修养(一)——引入
- aspx隐藏前台控件div_c# – 代码隐藏页面无法“查看”aspx页面中声明的任何项目/控件...
- 为什么WordPress网站应尽量避免使用过多插件