Vue路由

一、安装路由依赖

使用命令提示符创建项目后，进入项目文件夹，输入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:''}”格式