#### <font color=red /> 2，vue-router基本使用 >vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 - 1:下载`npm i vue-router -S` - 2:在main.js中引入`import VueRouter from 'vue-router'`; - 3:安装插件`Vue.use(VueRouter)`; - 4:创建路由对象并配置路由规则`let router = new VueRouter({routes:[{path:'/home',component:Home}]})`; - 5:将其路由对象传递给Vue的实例，options中加入`router:router` - 6:在app.vue中留坑`<router-view></router-view>` - `<router-link>`: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签. - `<router-view>`: 该标签会根据当前的路径, 动态渲染出不同的组件. * 网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和`<router-view>`处于同一个等级. * 在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变. >component :is=" " component :is这个是vue的组件，is=要渲染的组件，不会更新路由，不会更新初始化函数mounted和created。刷新页面后会跳回默认显示页面； ## 具体代码 router.js 路由配置 ``` 1. 创建好项目，自带的router文件就是路由配置文件 import Vue from 'vue' import VueRouter from 'vue-router' // 引入 vue-router import Father from '../views/Father.vue' 2. 在全局使用这个vue-router Vue.use(VueRouter) 3. 配置路由选项 const routes = [ { path: '/', name: 'Father', component: Father, meta: { keepAlive: true // 需要缓存 } } ] 3. 创建Vue-router实例，挂载router配置项 const router = new VueRouter({ routes }) 4. 最后导出 Vue-router实例， 提供给 Vue 挂载使用 export default router ``` index.js Vue入口文件配置 ``` import Vue from 'vue' import App from './App.vue' 1. 引入 路由配置文件 import router from './router' import store from './store' Vue.config.productionTip = false 2. 将路由挂载到 Vue实例中使用。 new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` 在app.vue中“留坑”//app.vue中 ``` <template> <div> <router-view></router-view> </div> </template> <script> export default { data(){ return {} } } </script> ```