router-link的使用方法
<!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的使用方法的更多相关文章
- navigate是Router类的一个方法,主要用来跳转路由。
navigate是Router类的一个方法,主要用来跳转路由. 1 2 3 4 5 6 7 8 9 interface NavigationExtras { relativeTo : Activat ...
- [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 ...
- Vue router link
html: <router-link to="test">Go to Foo</router-link> <router-link to=" ...
- [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 ...
- angular2 学习笔记 ( Router 路由 )
参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
- react-router5.x 的配置及其页面跳转方法和js跳转方法
https://blog.csdn.net/sinat_37255207/article/details/90745207 上次用react-router 的时候 还是3.x 很久不用 已经到rea ...
- vue router应用及总结
编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...
随机推荐
- sqlsugar的sum的用法
通过论坛的检索 查到三篇文章是关于sum的 http://www.codeisbug.com/Ask/9/4531 http://www.codeisbug.com/Ask/14/4128 文章1:2 ...
- PHP中foreach有关引用的问题
软件开发的过程中,细节处理非常重要,说得大一点就是细节决定成败,别人不懂的地方,你懂,别人没注意到的细节,你注意到了,这就是你胜出对方的地方,这样就体现出了你的价值. 下面是几个foreach循环中引 ...
- bzoj 2618【半平面交模板】
#include<iostream> #include<cstdio> #include<algorithm> #include<cmath> usin ...
- 组合数学练习题(一)——Chemist
题意: 从 n 个人中选出不超过 k 个人,再在选出的人中选出一些人成为队员,再在队员中选一名队长,求不同的方案数.答案 mod 8388608. 共有T组询问,每次给你n和k.T ≤ 10^4 k ...
- UTF-8格式的文本文件程序读取异常
最近在windows服务器上直接创建并手打输入配置参数,比如设置概率0.6,然后用java程序打开读取该参数,在本地linux环境下测试完全正常,但是一放到服务器上,就报NotNumber错误,查看了 ...
- oracle数据库当前用户下所有表名和表名的注释
select a.TABLE_NAME,b.COMMENTSfrom user_tables a,user_tab_comments bWHERE a.TABLE_NAME=b.TABLE_NAMEo ...
- Python3进行RSA2加密、解密、签名
1.python3的PyCryptodome库用于密码学,属于对PyCrypto库的扩展 Linux上安装: pip install pycryptodome Windows上安装: pip inst ...
- SQL 初级教程学习(五)
1.DEFAULT 约束用于向列中插入默认值. CREATE TABLE Orders(Id_O int NOT NULL,OrderNo int NOT NULL,Id_P int,OrderDat ...
- bzoj2333[SCOI2011]棘手的操作 洛谷P3273 [SCOI2011]棘手的操作
2333? 先记一下吧,这题现在全部都是照着题解做的,因为怎么改都改不出来,只好对着题解改,以后还要再做过 以后再也不用指针了!太恶心了!空指针可不止直接特判那么简单啊,竟然还要因为空指针写奇怪的分类 ...
- Java Annontation(注解)详解
java中经常用到注解(Annontation),索性整理了下关于注解的相关知识点: 一.概念 Annontation是Java5开始引入的新特征,类似与.NET 中的attribute.中文名称一般 ...