Vue路由开发（命名路由、路由传参、命名视图、路由原信息、路由模式、路由滚动），登陆案例（附代码图）

路由开发

vue-router 官网导航守卫 | Vue Routerhttps://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

命名路由

在路由文件index.js当中，对路由设置name属性

!在调用的时候通过对象格式调用

路由传参

动态路由

this.$route.params
​
定义路由的时候
.......
{
    path: "/index/:id"
    .......
}
调用路由的时候

get请求，请求携带参数，参数以问号开始，键=值，以&分割，请求参数明文添加在url上，相比较动态路由，get请求传参有一下好处：

1、传参数据多

2、使用方便

get请求可以通过手动评价url实现，所以具有一定的风险

vue可以通过内置的$route.query方法获取get请求参数

命名视图

在之前的内容当中，我们一直采用的是一个路由视图

就是在router-view标签上添加name属性，然后再路由上，将component替换为components,然后形成对象格式，进行路由加载组件的映射。

必须要设置一个default命名视图，默认如果路由传递了一个组件，那么就让default执行的router-view进行加载

路由元信息

meta

$route

params

query

路由模式

运行项目

npm run serve

打包命令

npm run build (整理，构建)

就是将项目的html和静态文件抽离整合成前端项目

但是打包有两种模式：

默认hash模式，路由含有#/，需要使用默认服务器打开才可以看到

history: 路由上没有#/，可以直接打开使用

vue.config.js

路由滚动

由于vue是单页面开发，组件跳转采用的是a标签的锚点逻辑，跳转之后，没有刷新页面，导致，在a页面的滚动条状态会保留到跳转到b页面的时候。这种情况下需要手动的调整滚动条位置。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) //让vue使用Router

.......

var r = new Router({
    routes: router,
    linkActiveClass: "active",
    scrollBehavior(to,from,point){
        console.log(arguments,"----------------------------------")
        console.log(to,from,point)
        return {x:0,y:0} //默认滚动到顶部
    }
}) //导出路由对象，对象已经加载规则

.......

export default r

登录案例

登录成功，跳转首页

登录失败，返回登录页

如果没有登录禁止访问首页

不登录也可以访问登录页面