Vue_(Router路由)-vue-router路由的基本用法
生活随笔
收集整理的這篇文章主要介紹了
Vue_(Router路由)-vue-router路由的基本用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
vue-router官網：傳送門
vue-router起步：傳送門
?
vue-router路由：Vue.js官網推出的路由管理器，方便的構建單頁應用
單頁應用：Single Page Application簡稱SPA，只有一個web頁面的應用，用戶與應用交互時，動態更新該頁面的內容
簡單的來說，根據不同的url與數據，將他們都顯示在同一個頁面中，就可以稱為是單頁應用
而控制頁面跳轉需要用路由
?
vue-router下載：下載js，或使用npm install vue-router -S
vue-router使用：
定義組件
配置路由
創建路由對象
注入路由
?
Learn
一、-vue-router路由的基本用法
?
目錄結構
【每個demo下方都存有html源碼】
?
一、-vue-router路由的基本用法
? 使用 router-link 組件來導航、通過傳入 `to` 屬性指定鏈接、<router-link> 默認會被渲染成一個 `<a>` 標簽
<body><div id = "GaryId"><!--router-link默認被渲染成一個a標簽--><router-link to="/home">首頁</router-link><router-link to="/foods">美食</router-link><div><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view></div></div></body>?
? 分四步使用vue-router
<script>//1 定義組件let Home = {template : "<h2>首頁</h2>"}let Foods = {template : "<h2>美食</h2>"}//2 配置路由 路由可能有多個const myRoutes = [{path : "/home",component : Home},{path : "/foods",component : Foods}]// 3 創建路由對象const myRouter = new VueRouter({//routes : routes routes : myRoutes});new Vue({//4 注入路由 簡寫 router : myRouter }).$mount("#GaryId")</script>?
?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Gary</title></head><body><div id = "GaryId"><!--router-link默認被渲染成一個a標簽--><router-link to="/home">首頁</router-link><router-link to="/foods">美食</router-link><div><!--將數據顯示在這里--><router-view></router-view></div></div></body><script type="text/javascript" src="../js/vue.js" ></script><script type="text/javascript" src="../js/vue-router.js" ></script><script>//1 定義組件 let Home = {template : "<h2>首頁</h2>"}let Foods = {template : "<h2>美食</h2>"}//2 配置路由 路由可能有多個 const myRoutes = [{path : "/home",component : Home},{path : "/foods",component : Foods}]// 3 創建路由對象 const myRouter = new VueRouter({//routes : routes routes : myRoutes});new Vue({//4 注入路由 簡寫 router : myRouter }).$mount("#GaryId")</script></html> Gary_vue-router.html?
轉載于:https://www.cnblogs.com/1138720556Gary/p/10567856.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Vue_(Router路由)-vue-router路由的基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何设置让 AirPods 在 iPho
- 下一篇： 单页vue路由router