前端学习（1520）：vue-router嵌套路由
生活随笔
收集整理的這篇文章主要介紹了
前端学习（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嵌套路由的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 泛微OA如何重置管理员密码
- 下一篇： 前端学习（1991）vue之电商管理系统