1、新建src/router.js
2、src/main.js
//导入vue和新建的router.js
import Vue from 'vue'
import router from './router.js'
3、src/router.js
//导入vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用vue-router(名称为VueRouter,可以随便取)
Vue.use(VueRouter)
//定义组件模板内容
const first = {template:'<div>这是first内容</div>'}
const second = {template:'<div>这是second内容</div>'}
const Home = {template:'<div>这是Home内容</div>'}
//定义组件路径
const router = new VueRouter({
mode:"history",
base:__dirname,
routes:[ //routes
{path:"/",component:Home},
{path:"/first",component:first},
{path:"/second",component:second}
]
})
//使用组件
new Vue({
router,
template:`
<div id="r">
<ul>
//router-link to=“指向的组件路径”
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">first</router-link></li>
<li><router-link to="/second">second</router-link></li>
</ul>
<router-view class="abc"></router-view>
//router-view组件显示区域
</div>
`
}).$mount("#app") //组件挂载(index.html中定义的div的id为app)
4、运行npm run dev,页面显示效果为
![](https://img2018.cnblogs.com/blog/1743740/201907/1743740-20190726001735731-1620074522.png)
!!导入.vue文件模板,import parent from './transition.vue'
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步