vue提供了vue-router路由,来实现页面的跳转。vue-router可以直接在项目的main.js中引入使用,但是在实际开发中,单独拿出来配置使用的更多。
1.安装vue-router插件
项目目录下执行命令
npm install vue-router --save
2.vue-router目录结构
项目目录src下新建文件夹router,新建基本配置文件index.js
3.引入vue-router
index.js中引入vue-router,必须要通过 Vue.use() 明确地安装路由功能
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
4.定义(引入)路由组件
const Home = ()=>import('@/views/home/Home.vue') //引入组件
const Category = ()=>import('@/views/category/Category.vue')
5.定义路由
const routes=[
{
path:'/', //默认路径
redirect:'home'
},
{
path:'/home',
component:Home
},
{
path:'/category',
component:Category
}
]
6.创建router实例
const router = new VueRouter({
routes, // (缩写) 相当于 routes: routes
mode:'history' //history模式下,路径中不会有#
});
export default router
7.挂载根实例
项目根目录main.js中配置
import router from './router/index' //引入router的index.js文件
new Vue({
router, //挂载到根实例
render: h => h(App),
}).$mount('#app')