vue 路由基础

mingde 发布于2019-08-23 18:09 / 3130人阅读

摘要：路由基础使用插件处理路由，路由是开发单页应用必须掌握的知识。什么是是官方提供前端路由插件，借助它我们实现可以基于路由和组件的单页面应用。子路由前面不能有。命名路由路由对象中的属性是路由的名字，可用该名字指定路径。

vue 路由基础

vue 使用 vue-router 插件处理路由，路由是开发单页应用必须掌握的知识。

什么是 vue-router？

（1）vue-router 是 Vue 官方提供前端路由插件，借助它我们实现可以基于路由和组件的单页面应用。

（2）它与传统的页面区别在于：

传统的页面应用采用的是后端路由，即通过超链接来实现页面切换和跳转的。

而在 vue-router 单页面应用中，则是通过路径之间的切换（实际上就是组件的切换）。

router-link 和 router-view 组件

router-link 是一个a（链接）标签的封装，router-view 是路由视图，渲染 router-link 匹配到的组件，可配合使用和使用。

更多详细信息

路由配置 动态路由

$route 是当前路由，可用 watch在组件中监它的变化，有一个 params 属性，值一个包含动态路由的对象。

watch: {
  "$route"(to) {
     console.log(to);
     //将路由的 params 属性赋值给组件的 data 属性
     to.params && to.params.view && (this.effect = to.params.view)
    },
}

route 和 router 的区别

路由对象为：

{
    path:"/argu/:name",
    // 使用 import 动态引入路径对应的组件，起到懒加载的作用
    component:()=>import("@/views/ArguPage")
}

可在该路由的组件中这样获取name的值：

$route.params.name //给同一个组件设置传递不同的params，实现组件的复用

嵌套路由

在路由对象中添加一个 children 属性，值是一个数组，可包含多个子路由。子路由 path 前面不能有 / 。父级路由对应的组件必须有路由出口，即 router-view。

命名路由

路由对象中的 name 属性是路由的名字，可用该名字指定路径。
在 router-link 的 to 属性动态绑定 路由对象。

命名视图

route-view 是路由视图，只有一个视图时，路由匹配的组件在该视图中渲染，多个视图则要对视图进行命名。

路由对象：

{
    path:"/name/view",
    name:"name_view",
    // 注意命名视图的 components 和 组件的 component 的区别
    components:{
        // 不给 router-view 设置 name 属性，name 值就是 default
        default:()=>import("@/views/ChildPage"),
        sister:()=>import("@/views/SisterPage"),
        brother:()=>import("@/views/BrotherPage"),
    }
}

JS 操作路由

路由对象 $router 有多个函数push 、 go 、 replace

push 可导航到不同的页面，会将该路径进入历史记录。
$router.push 和 window.history.pushSate 一样。
push 可接受不同的参数：

//字符串路径
this.$router.push("home")

// 路由对象
this.$router.push({path:"home"})

// 命名路由加参数
this.$router.push({name:"argu",params:{name:"jack"}})
//  path 路由和 query
this.$router.push({path:"argu",query:{name:"jack"}});
//  path  和 params 不可一起使用，params 会被忽略
this.$router.push({path:"argu",params:{name:"jack"}});
this.$router.push({name:"argu",query:{name:"jack"}});

go 的参数是一个整数，表示回退或者前进多少历史记录。

// 在浏览器记录中前进一步，等同于 history.forward()
$router.go(1)

// 后退一步记录，等同于 history.back()
$router.go(-1)

// 前进 3 步记录
$router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
$router.go(-100)
$router.go(100)

router.replace(location) = window.history.replaceState
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

使用场景：不需要用户回退的情况，比如权限验证。

// 路由名字
this.$router.replace("name_view");
// 字符串路径
this.$router.replace("/name/view");
// 路由对象
this.$router.replace({path:"/name/view"});
// 命名路由带 params 
this.$router.replace({name:"name_view",params:{age:24}});
// path 和 query
this.$router.replace({path:"name_view",query:{age:24}});
// this.$router.replace({path:"/name/view",params:{age:24}});

重定向和别名

// 路由重定向:访问 /index ，重定向到 /
{
    path:"/index",
    redirect:"/"
}

redirect 也可设置一个对象：

{
    path:"/index",
    redirect:{
        name:"home"
    }
}

redirect 还可以设置为一个函数，传递一个参数 to,可根据该对象的不同值，重定向到不同的页面，返回一个 命名路由 或者 字符串路径 。

{
    path:"/index",
    redirect:to=>{
        // do something with to 
        return {
            name:"home"
        }
    }
}

to 是一个包含路径参数的对象：

{
    name: "index",
    meta: {},// 路由元数据，可在全局导航守卫中获取该对象，然后不同页面设置不同的值，比如设置页面的标题
    path: "/index", // 路由路径 解析为绝对路径 /a/b
    hash: "", // 书签
    query: {}, // 查询参数 /a?user=jack, $route.query.uer 的值为 jack
    params: {}, //
    fullPath: "/index", // 完整路径
    matched: [{ // 当前路由的所有嵌套路径片段的路由记录,路由记录就是路由的副本。
        path: "/index",
        regex: {
            keys: []
        },
        components: {},
        instances: {},
        name: "index",
        meta: {},
        props: {}
    }],
    redirectedForm:""// 重定向来源的名字
}

router.beforeEach((to, from, next) => {
    console.log("①，全局前置守卫,beforeEach");
    //给每个页面设置不同的标题，标题就从 meta 中获取
    //setTitle = (title)=>{
    // window.document.title=title||"admin"
    //}
    to.meta && setTitle(to.meta.title);
    next(()=>{
        console.log("②，全局前置守卫,beforeEach");
    });
});

路径别名

{
    name: "home",
    alias:"home_page",// 路径别名
    path: "/",
    component: Home
}

GPU云服务器云服务器 vue基础教程 Vue_Vue Vue vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104754.html

Vue-router(vue路由基础详解)

摘要：你可以在创建实例的时候，在配置中给某个路由设置名称。如果没有设置名字，那么默认为。 Vue.js路由(Vue-router) 安装直接引入 vue-router下载链接https://unpkg.com/vue-router/... npm下载 npm install vue-router 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：在你的文...

JasinYip 2019-08-21 16:26 评论0 收藏0
vue-router 基础知识点

摘要：路由模块的本质就是建立起和页面之间的映射关系。模式的原理是事件监测值变化，可以在对象上监听这个事件。这两个方法应用于浏览器记录栈，在当前已有的基础之上，它们提供了对历史记录修改的功能。 vue-router 这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是...

ningwang 2019-08-26 10:41 评论0 收藏0
20190613-Vue Router 基础（一）

摘要：那么这个时候，我们需要在中，加载配置三个组件为复数。传递参数不需要在中进行配置获取参数其他的写法带查询参数，下面的结果为拼到中什么是 Vue Router？ Vue Router是Vue.js的官方路由管理器，可以控制Vue单页应用的路由。如何快速上手？ vue-cli脚手架自带Vue-Router依赖新版的vue-cli脚手架中，默认default模式没有router依赖，请选...

andong777 2019-08-23 18:07 评论0 收藏0
vue轻量级后台管理系统基础模板

摘要：具体实现请查看和的退出登陆回调方法。现在除了必要的页面需要在一开始添加到路由表里，其他的页面都可以根据后台数据来自动生成。另外，如果在未登陆时要访问某一指定页面，会重定向到登陆页，登陆成功后会自动跳到这个指定页面。项目地址 vue-admin-template 在线预览更新 2019.6.25 更新修复路由表冲突问题退出当前用户，换账号重新登陆时，上个账号和现在的账号路由表会有...

2shou 2019-08-23 14:17 评论0 收藏0
【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。系列目录地址一、基础知识概览第一章 - 一些基础概念（posted at 2018-10-31）第二章 - 常见的指令的使用（posted at 2018-11-01）第三章 - 事件修饰符的使用（posted at 2018-11-02）第四章 - 页面元素样式的设定（posted a...

cpupro 2019-05-22 19:26 评论0 收藏0