一、安装路由依赖
使用命令提示符创建项目后,进入项目文件夹,输入npm i vue-router@3 -s,指定3版本
二、项目架构
在scr目录下新建pages文件夹,创建Home.vue、login.vue、register.vue文件。新建router文件夹并创建index.js文件,index.js文件配置路由映射规则。
三、文件编写
1、配置路由映射规则
//引入依赖
import Vue from 'vue'
import VueRouter from 'vue-router'
// 挂载
Vue.use(VueRouter)
//引入组件模块
import 组件名 from '组件路径'
//创建映射关系
const routes=[
{
path:'/', 当用户访问了一个空白页
redirect:'/home' 将用户提交重定向到首页,redirect重定向
},
{
name:'login' --->推荐使用name+path便于后期维护
path:'/singin',
component:login
}
]
const router=new VueRouter({
routes,
})
export default router //导出
2、编写main.js文件
引入index.js模块
import router from './router/index'
在new Vue({
router
})中挂载
3、编写app.vue文件
因为使用了路由,因此需要搭配路由视图显示路由组件router-look
,其中以to=“”搭配url匹配路径
<li><router-link to="/" exact="">LOGO</router-link></li>
<li><router-link to="/register">注册</router-link></li>
<li><router-link :to="{name:'login'}">登录</router-link></li>
<li><router-link to="/home">首页</router-link></li>
⭐⭐:to="{name:'login'}"
为重定向的登录路径,在index.js中以name为原本的url名称,path为新定义的url名,最后在访问login模块时,url路径会自动匹配成/signin
,推荐使用:to=“{name:''}”
格式