资讯专栏INFORMATION COLUMN

VueRouter基础

golden_hamster / 1117人阅读

摘要:的路径的路由组件点击后的结果你会发现被匹配后中的就会接收到字符串,因此输出结果如图所示对象模式如果是一个对象,它会被按原样设置为组件属性。最终的就是传入的

安装

直接下载(官方CDN)

https://unpkg.com/vue-router/...
通过页面script标签引入,如下:

NPM安装

npm install vue-router --save-dev

安装完成后需要Vue.use()安装此功能,例如:

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
入门

简单例子



  


vue1217
  
  






// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App";

Vue.use(VueRouter);

const foo = {
  template: "
foo
" }; const bar = { template: "
bar
" }; const routes = [{ path: "/foo", component: foo }, { path: "/bar", component: bar }]; let router = new VueRouter({ routes }); /* eslint-disable no-new */ new Vue({ el: "#app", router, render: h => h(App) });

动态路由匹配

通过带有冒号标记的属性匹配,例如

path: "/foo/test0"
path: "/foo/test1"
都可以被
path: "/foo/:id"
匹配到
并且被匹配到的组件内部可以通过
this.$route.params获取到被匹配的参数
如上:
test0组件下的params参数为
{
    id: "test0"
}

同样的:
/foo/test0/jason/0411
被
/foo/:id/:name/:birth
匹配到的参数如
{
    id: "test0",
    name: "jason",
    birth: "0411"
}

小提示:对于通过路由进行组件间的切换时,并不会来回构建组件实例,而是复用已存在的组件,想要监听路由参数变化可以通过watch属性或者通过beforeRouteUpdate钩子函数做操作

{
    watch: {
        "$route"(to, from) {
            // something to do
        }
    }
}
{
    beforeRouteUpdate(to, from, next) {
        // something to do
        next();// next必须执行不然的话beforeRouteUpdate钩子函数不会resolved
    }
}

嵌套路由

顾名思义就是路由跳到的组件又包含有路由。
举个栗子:




const foo = {
  template: `
          

{{ $route.params.id }}

` }; const home = { template: "
home
" }; const hm = { template: "
hm
" }; const pf = { template: "
pf
" }; const ps = { template: "
ps
" }; const routes = [{ path: "/:id", component: foo, children: [ { path: "", component: home }, { path: "hm", component: hm }, { path: "pf", component: pf }, { path: "ps", component: ps } ] }];

通过$router导航

在组件Vue实例内部可以通过
this.$router.push(location, onComplete?, onAbort?)
this.$router.replace(location, onComplete?, onAbort?)
this.$router.go(n)

// 字符串
router.push("home")
// 对象
router.push({ path: "home" })
// 命名的路由
router.push({ name: "user", params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})

const userId = 123
router.push({ name: "user", params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: "/user", params: { userId }}) // -> /user

// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)

命名路由

在创建路由的时候可以通过name属性设置路由名称

let routes = [{
    path: "/foo/:userId",
    name: "test",
    component: User
}];

如果需要链接到这个命名路由我们可以酱紫

也可以酱紫

router.push({
    name: "test",
    params: {
        userId: 410100
    }
});

命名视图

很多时候我们会碰到并存的多个视图(router-view),我们就需要为视图设置name没有设置的为default



当然构建路由的时候也需要设置对应视图的组件映射

const router = new VueRouter({
  routes: [
    {
      path: "/",
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向

let routes = [{
  path: "/",
  redirect: "/goods"
},{
  path: "/goods",
  component: goods
}];
当path为/的时候会自动重定向至/goods加载goods组件
当然也可以通过name重定向,作用是相同的
let routes = [{
  path: "/",
  redirect: {
    name: "goods"
  }
},{
  path: "/goods",
  name: "goods",
  component: goods
}];
当然也可以是一个方法
let routes = [{ path: "/a", redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
}}];

别名

别名与重定向只有一丢丢不同,重定向指/a路径调到/b路径加载,别名指还是加载/a路径只是加载内容是/b路径下的

const router = new VueRouter({
  routes: [{ 
    path: "/a", 
    component: A, 
    alias: "/b" 
  }]
});

5.路由参数传递
有三种模式进行传递:布尔模式、对象模式、函数模式
布尔模式: 如果props被设置为true,route.params将会被设置为组件属性。

router-link的路径
foo

foo的路由
{
  path: "/foo/:userName",
  name: "foo",
  component: foo,
  props: true
}

foo组件


点击router-link后的结果

你会发现/foo/params被path匹配后

route.params =  {
    userName: "params"
};

props中的userName就会接收到字符串"params",因此输出结果如图所示

对象模式:如果props是一个对象,它会被按原样设置为组件属性。

{
  path: "/foo",
  name: "foo",
  component: foo,
  props: {
    userName: "From Obj"
  }
}

渲染后的结果:

函数模式

{
  path: "/foo",
  name: "foo",
  component: foo,
  props: (route) => ({userName: route.query.name})
}

看起来还是很清楚的,只是props会接收一个当前的路由参数,将参数中的值转换成你想要的值,以上三种模式自然也不影响通过router-view的v-bind:user-name这种方式传递,但是对于同名的参数值会有影响。

let lastProps = {};
let vBindProps = {
    userName: "vBind",
    name: "vBind"
};
let routeProps ={
    userName: "route"
};
Object.assign(lastProps,vBindProps,routeProps);
// {userName: "route", name: "vBind"}
最终的lastProps就是传入的props

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

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

相关文章

  • VueRouter基础

    摘要:的路径的路由组件点击后的结果你会发现被匹配后中的就会接收到字符串,因此输出结果如图所示对象模式如果是一个对象,它会被按原样设置为组件属性。最终的就是传入的 安装 直接下载(官方CDN) https://unpkg.com/vue-router/...通过页面script标签引入,如下: NPM安装 npm install vue-router --save-dev 安装完成后需要Vu...

    FreeZinG 评论0 收藏0
  • VueRouter基础

    摘要:的路径的路由组件点击后的结果你会发现被匹配后中的就会接收到字符串,因此输出结果如图所示对象模式如果是一个对象,它会被按原样设置为组件属性。最终的就是传入的 安装 直接下载(官方CDN) https://unpkg.com/vue-router/...通过页面script标签引入,如下: NPM安装 npm install vue-router --save-dev 安装完成后需要Vu...

    Aklman 评论0 收藏0
  • Vue-router(vue路由基础详解)

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

    JasinYip 评论0 收藏0
  • vue-router 基础知识点

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

    ningwang 评论0 收藏0
  • vue:路由实现原理

    摘要:方法与方法不同之处在于,它并不是将新路由添加到浏览器访问历史栈顶,而是替换掉当前的路由可以看出,它与的实现结构基本相似,不同点它不是直接对进行赋值,而是调用方法将路由进行替换。 随着前端应用的业务功能起来越复杂,用户对于使用体验的要求越来越高,单面(SPA)成为前端应用的主流形式。大型单页应用最显著特点之一就是采用的前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图。...

    mikasa 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<