# 路由文件设置路径方法： 官方网站：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> ~~~