使用步骤
-
安装vue-router,命令:
npm i vue-router
-
导入并应用插件
// main.js import VueRouter from 'vue-router' Vue.use(VueRouter)
-
创建src/router/index.js,该文件专门用于创建整个应用的路由器
//引入VueRouter import VueRouter from 'vue-router' //引入About、Home组件 import About from '../components/About' import Home from '../components/Home' //创建router实例对象,去管理一组一组的路由规则 const router = new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] }) //暴露router export default router
-
创建Vue实例时指定router配置项,值为步骤三中创建的index.js
//引入路由器 //引入router,如果创建的文件名是index.js,引入的路径中可以不用具体到文件名,默认就会找index.js import router from './router' //创建vm new Vue({ el:'#app', render: h => h(App), // 引入VueRouter并应用插件后,可以使用router配置项 router:router })
-
借助router-link标签实现路由的切换(active-class可配置高亮样式)【这样就不需要我们手动切换访问的路径实现访问不同的组件】
<!--router-link标签最终会变成a标签,如果是按钮实现的跳转,是不可以使用该标签实现的--> <!--active-class:当前元素被激活时会为当前元素添加类名--> <!--to:值为路由器中配置的每一个路由的path--> <router-link active-class="active" to="/about">About</router-link>
-
指定展示位置,当浏览器路径改变时,vue-router会根据路由找到对应的组件并显示在该位置
<router-view></router-view>
多页面应用改造为单页面应用
- 找出导航区和展示区
- 将其中一个html的body部分中的内容放到App中
项目启动后,控制台出现如下报错
"export 'default' (imported as 'VueRouter') was not found in 'vue-router'
浏览器控制台出现如下报错,说明使用的vue-router版本过高,vue2对应vue-router 3版本
注:vue-router 3中没有VueRouter构造函数了
vue与vue-router的版本对应关系如下
vue 2 对应 vue-router 3
vue 3 对应 vue-router 4
卸载当前版本的vue-router,安装vue-router 3即可
npm uninstall vue-router
npm i vue-router@3
标签:Vue,步骤,js,vue,VueRouter,router,Router,import
From: https://www.cnblogs.com/wzzzj/p/18040056