to属性赋值

<!-- html -->

<div id="app">
<router-link to="/bj/朝阳区">北京</router-link>
<!-- 常规 -->
<router-link to="/sh">上海-常规</router-link>
<!-- 变量 -->
<router-link :to="path">上海-变量</router-link>
<!-- 对象path -->
<router-link :to="{path:'/sh'}">上海-对象path</router-link>
<!-- 对象name -->
<router-link :to="{name:'b'}">上海-对象name</router-link>
<!-- 对象name传值 -->
<router-link :to="{name:'a', params:{placename:'丰台区'}}">北京-对象name传值</router-link> <router-view></router-view>
</div>
<!-- js -->

<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
var router = new VueRouter({
routes: [
{
// 定义当前路由表中的name,可以不写
name: 'a',
// 设置参数(形参)
path: '/bj/:placename',
component: {
// 通过$route.params.参数名来获取参数
template: `
<div>北京市{{$route.params.placename}}</div>
`
} },
{
name: 'b',
path: '/sh',
component: {
template: `
<div>上海</div>
`
} }
]
}) var vm = new Vue({
el: '#app',
data: {
path: '/sh',
},
methods: {},
router
});
</script>

​ 1.常规跳转: 直接在to属性后面填写路由地址即可

<router-link to="/sh">上海-常规</router-link>

​ 2.变量:需要使用v-bind指令使to属性后方地址称为变量而非字符串(需提前在路由表设置参数)

<router-link :to="path">上海-变量</router-link>

​ 3.带参数的跳转:直接在to属性后方手动拼接字符串即可

<router-link to="/bj/朝阳区">北京</router-link>

​ 4.根据对象path跳转,依旧需要使用v-bind指令,并给to属性传递一个对象,对象内部是键值对,键为path

<router-link :to="{path:'/sh'}">上海-对象path</router-link>

​ 5.根据对象name跳转:依旧需要使用v-bind指令,还是to属性传递一个对象,但键名为路由表中设置好的name属性

<router-link :to="{name:'b'}">上海-对象name</router-link>

​ 6.对象name传值:传递name属性同事,为params传递一个数据(也需提前在路由表设置参数)

<router-link :to="{name:'a', params:{placename:'丰台区'}}">北京-对象name传值</router-link>

​ 注意:

​ 如果提供了 path,params 会被忽略,上述例子中的name并不属于这种情况

​ 你可以提供路由的 name 并手写完整的参数params:

​ 在导航中直接给router-link设置params属性,值是一个对象,你要设置的参数放在对象里

​ 如果需要这样传值,也需要在 你的路由表中定义好形参

vue-router之to属性赋值的更多相关文章

  1. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  2. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  3. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

  4. Vue Router详细教程

    1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...

  5. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  6. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  7. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  8. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  9. Vue 框架-04-计算属性

    Vue 框架-04-计算属性 计算属性是什么? 大家可以去看官网解释:计算属性和侦听器 今天的第一个小实例: 为啥先放折磨一个实例,之前数据绑定的就已经可以实现了,看起来那么简单,就是为了告诉大家,当 ...

随机推荐

  1. 实战spring自定义属性(schema)

    关于spring自定义属性(schema) 在开发Dubbo应用的时候,我们会在xml中做以下类似的配置: <dubbo:application name="dubbo_service ...

  2. 增删改查——Statement接口

    1.增加数据表中的元组 package pers.datebase.zsgc; import java.sql.Connection; import java.sql.DriverManager; i ...

  3. 以商品超卖为例讲解Redis分布式锁

    本案例主要讲解Redis实现分布式锁的两种实现方式:Jedis实现.Redisson实现.网上关于这方面讲解太多了,Van自认为文笔没他们好,还是用示例代码说明. 一.jedis 实现 该方案只考虑R ...

  4. DirectX12 3D 游戏开发与实战第一章内容

    DirectX12 3D 第一章内容 学习目标 1.学习向量在几何学和数学中的表示方法 2.了解向量的运算定义以及它在几何学中的应用 3.熟悉DirectXMath库中与向量有关的类和方法 1.1 向 ...

  5. Spring框架学习笔记(1)——控制反转IOC与依赖注入DI

    Spring框架的主要作用,就是提供了一个容器,使用该容器就可以创建并管理对象.比如说Dao类等,又或者是具有多依赖关系的类(Student类中包含有Teacher类的成员变量) Spring有两个核 ...

  6. 在vue中使用[provide/inject]实现页面reload

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject ...

  7. execl开发 新接触

    https//www.baidu.com/home/news/data/newspage?nid=3186684148848912913&n_type=0&p_from=1&d ...

  8. Redis数据库之KEY的操作与事务管理

    目的 了解并掌握各种数据类型的命令操作方式,以及各种数据类型值的操作方式.同时,主要培养对KEY的操作命令运用的能力.重点掌握对KEY信息的管理.事务常规管理和事务回滚操作. KEYS命令的练习,对K ...

  9. Idea 设置Eclipse快捷键(常用)

    使用Idea不习惯,特此将其配置成Eclipse风格的. 1.选择Eclipse风格,选择copy一份,可以自己重命名. 2.设置生成快捷键的快捷键(例如:Eclipse中的Alt+/) 3.设置ma ...

  10. LeetCode 题解汇总

    前言 现如今,对于技术人员(软开.算法等)求职过程中笔试都是必不可少的(免笔试的除外,大部分人都需要笔试),而笔试一般组成都是选择.填空.简答题.编程题(这部分很重要),所以刷题是必不可少的:对于应届 ...