前端学习（1514）：vue-router使用步骤
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1514）：vue-router使用步骤
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!-- 1引入插件的js -->
<!-- 2設置鏈接 -->
<!-- 3設立容器部分 -->
<!-- 4提供要渲染的組件 -->
<!-- 5配置路由 -->
<!-- 6掛載路由 -->
<!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掛載路由 --><body><div id="app"><!-- 按鈕 --><!-- <ul><li><a href="#/aaa">aaa</a></li><li><a href="#/bbb">bbb</a></li><li><a href="#/ccc">ccc</a></li><li><a href="#/ddd">ddd</a></li></ul> --><router-link to="/aaa">AAA</router-link><router-link to="/bbb">BBB</router-link><router-link to="/ccc">CCC</router-link><router-link to="/ddd">DDD</router-link><!-- <div id="container"></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 comA = {template: `<div>AAA</div>`}var comB = {template: `<div>BBB</div>`}var comC = {template: `<div>CCC</div>`}var comD = {template: `<div>DDD</div>`}//實例化路由var router = new VueRouter({routes: [{path: '/aaa',component: comA}, {path: '/bbb',component: comB}, {path: '/ccc',component: comC}, {path: '/ddd',component: comD}, ]})new Vue({el: '#app',//掛載使用對象router})</script></body></html>
運行結果
總結
以上是生活随笔為你收集整理的前端学习（1514）：vue-router使用步骤的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 泛微OA “低代码“开发-流程表单
- 下一篇： 操作系统课程设计之页面置换算法（流程模拟