看的网上的视频根据自己的实际情况总结的,也参考了别人的总结:
安装路由模块:
1.本地环境安装路由插件vue-router:
npm install vue-router --save -dev
2.在main.js中导入vue-router:
2.1import Router233 from 'vue-router' //Router233 这个路由包名自定义就行,不过要和后面用到的保持一致
2.2 Vue.use(Router233)
2.3//配置路由
const router = new Router233({
routes:[
//routes里自行设置,component:xxx 这里的xxx 就是我们的组件名,例如我这的Home/HelloWorld
需要我们在前面先导入
//import HelloWorld from './components/HelloWorld'
//import Home from './components/Home',
{path:"/",component:Home},
{path:"/helloworld",component:HelloWorld}
],
mode:"history" //
})
2.4//在 new Vue({}) 中加上 router :
new Vue({
router,//使用路由
)}
3.在App.vue 中的html 中 加上 router-view(展示路由):
<!--1模板:html结构-->
<template>
<!-- 有且只有一个根标签 例如: <div id="app">-->
<div id="app">
<router-view></router-view>
</div>
</template>