# 路由文件設置路徑方法： 官方網站：https://router.vuejs.org/zh/guide/#javascript ## 路由文件里router index.js import User from '../views/User' //引入頁面 {path:'/user', //鏈接中的地址（可以隨意設置） component:User //頁面導航 } ------------------------------- # 代碼案例： ~~~ import Vue from 'vue' import VueRouter from 'vue-router' //引入頁面 import Index from '../views/index' //引入頁面 import Goods from '../views/Goods' //引入頁面 import User from '../views/User' //引入頁面 Vue.use(VueRouter) const routes = [ {path:'/', component:Index }, //頁面導航 {path:'/goods', component:Goods }, //頁面導航 {path:'/user', component:User //頁面導航 } ] const router = new VueRouter({ routes }) export default router ~~~ -------------------------------  # 子組件頁面里： ## 用router-link引入 tag是把A標簽改成li標簽 因為router-link默認的是a標簽 to則是設置路徑的意思 ~~~ <ul class="nav"> <router-link tag="li" to="/">首頁</router-link> <router-link tag="li" to="goods">商品</router-link> <router-link tag="li" to="user">用戶中心</router-link> </ul> ~~~ ## 代碼案例： ~~~ <template> <ul class="nav"> <router-link tag="li" to="/">首頁</router-link> <router-link tag="li" to="goods">商品</router-link> <router-link tag="li" to="user">用戶中心</router-link> </ul> </template> <script> export default { } </script> <style scoped> .nav{ background-color: #42B983; text-align: center; } .nav li{ list-style:none; display: inline; margin: 20px; cursor:pointer; } ~~~  # app.vue里 語法： ``` <div class="content"> <router-view></router-view> //渲染出子頁面 </div> ``` ## 代碼案例： ~~~ <template> <div id="app"> <div> <NavBar></NavBar> </div> <div class="content"> <router-view></router-view> </div> </div> </template> <script> import NavBar from "@/components/NavBar"; export default { components:{ NavBar } } </script> <style> </style> ~~~