因为router是工作在Vue组件中,因此在谈到router的使用时,默认前提就是Vue已经安装配置好,在这里不再赘述。
一、下载、安装
通过如下命令下载router组件
npm install vue-router
二、配置
在src文件夹下创建router/router.js文件
1、导入Vue和router
import Vue from "vue"
import VueRouter from "vue-router"
2、将router关联给Vue
Vue.use(VueRouter);
3、新建一个router 的实例对象
let router=new VueRouter({
routes:[
]
}
4、设置匹配路径
let router=new VueRouter({
routes:[
{path:"/",redirect:"/home"},//路由重定向
{path:"/home",component:home },
{path:"/category",component:category },
{path:"/cart",component:cart },
{path:"/my",component:my },
{name:"haha",path:"/theme/:themeId/:title",component:theme},
{path:"/notfind",component:ErrorPage},
{path:"**",redirect:"/notfind"}
]
}
三、注册
在项目的main.js中注册这个路由router
1、在main.js中引入router
import router from "./router"
2、在项目根组件实例(即main.js中创建的Vue对象)中注册
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3、在项目的根组件App.vue中的template中配置router-view标签
<template>
<div id="app">
<!--开辟一片空间,存放匹配的组件-->
<router-view></router-view>
<!-- <router-view></router-view>-->
</div>
</template>
四、跳转使用
可通过两种方式,来进行页面的跳转
1、通过router-link标签
<template>
<ul id="tabBar">
<router-link to="/home">首页 </router-link>
<router-link to="/category">分类 </router-link>
<router-link to="/cart">购物车 </router-link>
<router-link to="/my">我的 </router-link>
</ul>
</template>
2、通过编程式导航
methods:{
goTheme(item){
this.$router.push({path:`/theme/${item.themeId}/${item.title}`});
}
}