07 Vue-router路由

目录

• 一、router-link
• 二、router-view
• 三、$router.push逻辑跳转
• 四、$router.go跳转
• 五、router间传参

一、router-link

<!-- router-link-->
<router-link to='/'>home</router-link>
<router-link to='/about'>about</router-link>
<router-link to='{name:'one'}'>one</router-link>

<!--
router-link:会被自动解析为a标签
它与a标签的区别：
			a标签点击url时，页面会被刷新
			router-link：就是相当于分页面板一样，不会刷新当前页面


设置a标签被选中时的状态，就是一直保持选中的状态
            a.router-link-exact-active{
                    background-color:pink;
                }
-->

二、router-view

<!--
	router-view:就是用来为路由渲染的组件占位置，一般就是在跟组件中
-->


<!--App.vue 根组件中-->
<template>
    <div id="app">
        <router-view/>
    </div>
</template>
<style>
</style>

三、$router.push逻辑跳转

// router 的逻辑跳转

// 1. 直接加路径跳转
this.$router.push('/one-view') 

// 2. 可以传对应的url和url携带的参数
this.$router.push({
    name:'one-view',
    parms:{id:1}
})

四、$router.go跳转

this.$router.go(-1)

// router采用history的方式访问访问上一级记录

五、router间传参

window.console.log(this.$router)// 获取当前访问url的地址等参数


/* {name: "home", meta: {…}, path: "/", hash: "", query: {…}, …}
   
    fullPath: "/" 当前访问的url全路径
    hash: ""
    matched: [{…}] 这里面放的时一些正则
    meta:
    __proto__: Object
    name: "home" // 这个时url的页面的别名
    params: {} // 这是url请求携带的参数，时以键值对的形式存储的
    path: "/"
    query: {}
    __proto__: Object
*/


//如何获取这个url中的参数？
	this.$router.params //获取的携带参数的字典
	this.$router.params.key // 因为返回的字典对象，所以都是可以点取值的
// 如何给url中参数添加值？
	this.$touter.params['key'] = value