编程式路由导航

实例中定义一个方法，这个方法绑定在标签上

然后就设置路由跳转

语法 this.$router.history.push('要跳转路由的地址')

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .active{

            color:red;

        }

    </style>

</head>

<body>

<div id="app">

    <!--编程时导航-->

    <button @click="goHome">去首页</button>

    <button @click="goList">去列表</button>

    <router-view></router-view>

</div>

</body>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    let home={

        template:'<div>home</div>'

    };

    let list={

        template:'<div>list</div>'

    }

    const routes=[

        {path:'/home',component:home},

        {path:'/list',component:list}

    ]

    let router=new VueRouter({

        routes:routes,

        linkActiveClass:'active'

    });

    //默认加载第一个路径

    router.push("/home");

    let vm=new Vue({

        el:"#app",

        methods:{

            //编程时导航

            goHome(){

                //页面跳转，push是增加到历史管理

               this.$router.history.push('/home')

                //go表示前进后退

                //this.$router.history.go(-1)

            },

            goList(){

                this.$router.history.push('/list')

                //将当前历史管理替换成list

                //this.$router.history.replace('/list')

            }

        },

        // 会在实例中提供两个属性this.$route(属性)，this.$router(方法);

        router:router,

    })

</script>

</html>

如果文章有帮助到您，请点右侧的推荐关注哈，O(∩_∩)O谢谢~ >>>>

vue.js编程式路由导航 --- 由浅入深的更多相关文章

  1. vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航

    路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...

  2. 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

    ## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...

  3. python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  4. VueJs(10)---vue-router（动态路由，嵌套式路由，编程式路由）

    vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...

  5. vue-router 编程式路由

    $route -> 使用它的属性 $router-> 使用它的方法 编程式的导航,即js控制跳转 //声明式:<router-link :to="..."> ...

  6. SpringMVC 解析（四）编程式路由

    多数情况下,我们在使用Spring的Controller时,会使用@RequestMapping的形式把请求按照URL路由到指定方法上.Spring还提供了一种编程的方式去实现请求和路由方法之间的路由 ...

  7. vue编程式路由实现新窗口打开

    一. 标签实现新窗口打开: 官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 ta ...

  8. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  9. Vue.js之vue-router路由

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1概述 vue-r ...

随机推荐

  1. 疫情控制 2012年NOIP全国联赛提高组(二分答案+贪心)

    P1084 疫情控制 题目描述 H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树,1 号城市是首都,也是树中的根节点. H 国的首都爆发了一种危害性极高的传染病.当局为了控 ...

  2. （进制）51NOD 1057 N的阶乘

    输入N求N的阶乘的准确值.   Input 输入N(1 <= N <= 10000) Output 输出N的阶乘 Input示例 5 Output示例 120解:这其实是MOD进制,将一个 ...

  3. laravel学习一

    Laravel 是一款简洁,优雅的一款框架,可以说是入门TP后的第二款可以选择的框架. 目录部分: app -> 自己写的代码 http -> Controller -> 控制器 b ...

  4. 2017西安网络赛C_SUM

    样例输入 1 1 样例输出 89999999999999999999999999 题意:利用上述公式,求出k的值 思路:找规律,找规律发现233个9,无论x是何值永远成立 (这种规律题尽量就不用跟队友 ...

  5. BST二叉查找树转双向链表DoubleLinke

    问题:在不创建任何新的节点的情况下,实现将一颗BST变成有序的双向链表. 分析: 在结构上,如图的一颗BST,每个节点都有left right指针分别指指向左右儿子.结构上和双向链表节点是完全相同的. ...

  6. WordPress个性页面制作教程

    写在前面的话: 有很多WordPress小伙伴想制作不同风格的页面来满足自己的个性需求 但是大多数模板提供的页面模板非常有限,该如何手动制作属于自己风格的模板页呢? 其实,正如以上所说的,每个人都想拥 ...

  7. 【C++】智能指针简述(三):scoped_ptr

    在介绍scoped_ptr之前,我们先回顾一下前两篇文章的内容. 首先,智能指针采用RAII机制,通过对象来管理指针,构造对象时,完成资源的初始化;析构对象时,对资源进行清理及汕尾. auto_ptr ...

  8. sql server nullif的使用技巧,除数为零的处理技巧

    在sql server中做除法处理的时候,我们经常需要处理除数为零的情况,因为如果遇到这种情况的时候,sqlserver会抛出遇到以零作除数错误的异常,我们总不希望把这个异常显示给用户吧. 做个会报这 ...

  9. POJ_3041_Asteroids

    参考自: http://user.qzone.qq.com/289065406/blog/1299322465 解题思路: 把方阵看做一个特殊的二分图(以行列分别作为两个顶点集V1.V2,其中| V1 ...

  10. tee命令用法

    用途说明 在执行Linux命令时,我们可以把输出重定向到文件中,比如 ls >a.txt,这时我们就不能看到输出了,如果我们既想把输出保存到文件中,又想在屏幕上看到输出内容,就可以使用tee命令 ...