<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="" name="Keywords">
    <meta content="" name="description"/>
    <title></title>
    <link rel="icon" href="">
    <style>
        .router-link-active{
            color: #ee2ad6;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
<div id="app">
    <!-- router-link   标签上的tag 是修改展示的标签元素的   不写的话默认 a标签
         active-class  是控制当前选中状态的类名的额，后边跟的值就是选中状态下的类名
                        不写这个属性，默认选中的类名就是 router-link-active
         exact-active-class  精确（会把传的一些参数认成不同路径）匹配 路由
                       不写这个属性，默认选中的类名就是 router-link-exact-active
                       -->
    <!-- <router-link to="/home" tag="button" active-class="current">首页</router-link>
     <router-link to="/list" tag="button" exact-active-class="exactClass">列表页</router-link>-->
    <!--query 这个单词是vue-router 规定的；
       后边跟的是个对象，router会把对象中的每一项拼接到路由后边-->
    <router-link :to="{path:'/home',query:{name:12,age:13}}">首页</router-link>
    <!--params 这个单词也是vue-router规定的，它是对象中的参数当做路拼到之前的路径上
        这个地方不能再用path跳转  必须用name跳转-->
    <router-link :to="{name:'q',params:{name:12}}"> 列表页</router-link>
    <router-view></router-view>
</div>

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

    let home = {
        template:"<h2>首页</h2>",
        mounted(){
            console.log(this.$route.query); //通过$route 可以获取路径上的参数
            console.log(this);
        }
    };
    let list = {
        template:"<h2>列表页</h2>",
        mounted(){
            console.log(this.$route.params);
            console.log(this);
        }
    };

    const routes=[
        {
            path:'/home',
            component:home
        },
        {
            path:'/list/:name', //若想要路径传参，则需要在路径参数对应的位置写成:变量的形式
                              //这个变量会对应上 在行内设置的params对象中的属性名对应的属性值
            name:'q', //若想用路径传参，则必须用name去指定跳转路径
            component:list
        }
    ];
    const router=new VueRouter({
        routes,
//        mode:'history'
        linkActiveClass:'current2' , //这个是给全局的选中状态下的 router-link修改类名
        linkExactActiveClass:'activeClass'
    });
    let vm = new Vue({
        el: '#app',

        data: {},
        router,
        created(){

        },
        directives: {},
        methods: {},
        computed: {},
        watch: {},
        filters: {}
    })
</script>

router-link的使用方法的更多相关文章

  1. navigate是Router类的一个方法，主要用来跳转路由。

    navigate是Router类的一个方法,主要用来跳转路由. 1 2 3 4 5 6 7 8 9 interface NavigationExtras {  relativeTo : Activat ...

  2. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  3. Vue router link

    html: <router-link to="test">Go to Foo</router-link> <router-link to=" ...

  4. [React] React Router: Router, Route, and Link

    In this lesson we'll take our first look at the most common components available to us in react-rout ...

  5. angular2 学习笔记 ( Router 路由 )

    参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...

  6. React Router教程

    React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...

  7. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  8. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

  9. react-router5.x 的配置及其页面跳转方法和js跳转方法

    https://blog.csdn.net/sinat_37255207/article/details/90745207 上次用react-router 的时候  还是3.x 很久不用 已经到rea ...

  10. vue router应用及总结

    编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...

随机推荐

  1. 小程序-demo：小程序示例-page/common

    ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0.     1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * we ...

  2. js追加子元素

    在页面加载完毕后,向div元素追加span子元素 <html><head><title>js</title><script type=" ...

  3. CodeForces 730H Delete Them (暴力)

    题意:给定n个名字,然后让你删除 m 个,且这m个必须满足同一个表达式且其他的不满足,问你能不能找到一个满足条件. 析:很明显首先知道的是这 m 个如果第 i 个位置相同,那么就肯定选这个位置是最好的 ...

  4. bzoj 1079: [SCOI2008]着色方案【记忆化搜索】

    本来打算把每个颜色剩下的压起来存map来记忆化,写一半发现自己zz了 考虑当前都能涂x次的油漆本质是一样的. 直接存五个变量分别是剩下12345个格子的油漆数,然后直接开数组把这个和步数存起来,记忆化 ...

  5. bzoj 4784: [Zjoi2017]仙人掌【tarjan+树形dp】

    其实挺简单的但是没想出来---- 首先判断无解情况,即,一开始的图就不是仙人掌,使用tarjan判断如果一个点dfs下去有超过一个点比他早,则说明存在非简单环. 然后考虑dp,显然原图中已经属于某个简 ...

  6. 【插件开发】—— 13 GEF双击模型事件

    前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭配 6 SWT复杂空间与布局搭配 7 SWT布局详解 ...

  7. 支持宕机自动恢复触发一次性或周期性任务执行的组件包首次介绍-easyTask

    easyTask介绍 一个方便触发一次性或周期性任务执行的工具包,支持海量,高并发,高可用,宕机自动恢复任务 使用场景 需要精确到秒的某一时刻触发任务执行.比如订单交易完成24小时后如果客户未评价,则 ...

  8. Luogu P1144 最短路计数 【最短路】 By cellur925

    题目传送门 常规的最短路计数问题:注意有重边(重边不用理,看样例),自环(读入时过滤). 另外这个无向图没有权,其实可以直接bfs做,但考虑到以后带权的情况,按spfa走了. 水题被卡了三次(嘤嘤嘤 ...

  9. LightOj 1074 Extended Traffic (spfa+负权环)

    题目链接: http://lightoj.com/volume_showproblem.php?problem=1074 题目大意: 有一个大城市有n个十字交叉口,有m条路,城市十分拥挤,因此每一个路 ...

  10. 51nod 1068 Bash游戏 V3

    列出前几项可以发现是个规律题,不要被题目的文字所欺骗,字符串处理10^1000即可 #include <bits/stdc++.h> using namespace std; int ge ...