登录时提示 未找到匹配url和请求方式的路由_Vue2路由（router）

一、router简介

在后端程序中，我们是使用的servlet或者springMVC来匹配前端的http请求，并响应相关的数据发送给前端。

在前端程序中，一个单应用程序，通过一个hash(#号)改变来切换页面的展示。

http://localhost:63342/mywebpack/index.html#/loginhttp://localhost:63342/mywebpack/index.html#/register

前端路由的优点在于，我们只是展示页面可以不需要通过http来请求后端响应，这样一定程度上减轻了服务器的压力，也减少了网络的请求。

关于#号的一些小常识：#号是用来指导浏览器动作的，#号后的字符是不会发送给服务端，同时也不会触发网页的重载，在通常使用的浏览器中#改变增加浏览器的访问历史，因此可以使用浏览器的后退，如果要将#号发送给服务端，需要转义为“%23”。

二、vue-router的基本使用

1.路由安装

第一种是在html中引入

第二种是使用webpack构建工具来引入，cnpm i vue-router -D ，引入后需要手动来安装

cnpm i vue-router -D import Vue from  'vue'import VueRouter from  'vue-router'//手动安装路由Vue.use(VueRouter)

2.创建路由组件

//定义两个路由组件var login = {    template:"

登录组件

"} var register = { template:"

注册组件

"}

3.创建路由对象

new VueRouter()构造器来构建一个路由对象，其中routes匹配路由规则，path 请求路由，component 所要展示的组件，

特别强调路由匹配规则的英文routes不要写错，不是router

var myRouter = new VueRouter({   //routes建立路由的匹配规则，注意单词    routes:[       { path:'/login',component:login },       { path:'/register',component:register},    ]})

4.在vm实例中注册路由对象

new Vue({    el:'#app',    //路由注册到vm实例    router : myRouter})

5.在html中使用路由展示

登录注册

是路由展示占位符，所展示的内容是由路由的匹配规则来进行展示的。

6.路由的重定向

//匹配规则routes: [     { path:"/login",component:login },     //根路径重定向至login组件     { path:"/",redirect:'/login'},     { path:"/register/:id/:name",component:register },],

7.选中路由高亮显示超链接

a.通过浏览器开发工具中的元素观察可知，当超链接改变时，在超链接中出现class="router-link-exact-active router-link-active" ，因此我们可以直接使用router-link-active来改变其样式

.router-link-active{     color:red;}

b.另外还有一种方法，自定义一个样式，通过在new VueRouter()的构造函数中，指定其linkActiveClass为这个自定义样式

.myActive{    color:red} var router = new VueRouter({    //使用自定义样式高亮显示其链接    linkActiveClass:'myActive',})

8.路由传参：使用query方式传递参数

通过在url中传递对象参数{id:10,name:zs}

登录

通过this.$route.query.id或者使用插值{{$route.query.id}}可以获取其中id值，同理name

9.路由传参：使用params方式传递参数

此方式符合restful规范，另外需要在匹配规则中指定其参数名

注册 //路由对象的创建var firstroute = new VueRouter({    //匹配规则    routes: [        { path:"/login",component:login },        { path:"/",redirect:'/login'},        //params方式需要在路由匹配规则中指定其参数名        { path:"/register/:id/:name",component:register },    ],})

通过this.$route.params.id或者使用插值{{$route.params.id}}可以获取其中id值，同理name

10.嵌套路由

一个路由匹配规则中，展示的组件默认只能在当前组件中的，如果需要将组件展示在当前展示的组件中(即组件展示在中所展示组件的，即嵌套展示)，使用嵌套路由。

例：有三个组件，main,login,register，将login,register展示在main这个组件中，同时main展示在根组件中。

main

这是main组件

登录注册

//定义三个路由组件var main = { template:"#tempmain",}var login = { template:"

登录组件

",}var register = { template:"

注册组件

",} //路由对象的创建var router = new VueRouter({ //匹配规则 routes: [ { path:"/main",component:main, // children嵌套路由，其中path中不能加/ // 否则会直接请求/login，而不是/main/login children:[ {path:"login",component:login}, {path:"register",component:register}, ]}, ], linkActiveClass:'myActive',}) //路由对象的注册new Vue({ el:"#app", //路由注册，也可以直接使用 router router:router,})