这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战
前言
今天我们继续复习回顾一下vue,今天主要讲一讲路由的router-link和router-view的知识，大家跟着我一起来看看吧。
router-link的使用
- 默认会被渲染成a标签的锚点形式:可以更改路由-hash
可以通过指定tag属性,更改router-link渲染城的标签的格式
此时router-link可以更改hash,是基于编程式导航(js)
2.编程式导航:
是比router-link更常用的一种改变路由地址的方式
- $router 路由对象
- 前进 forward(n) 2.后退 back(n) 3.go(n) 4.n>0后退 5. 跳转
- $route hash对象
代码示例
<div> <!-- 使用路由 tag可以渲染成变得标签格式,实际上是帮我们绑定事件 -->
<router-link tag="div" to="/login" >登录</router-link>
<router-link to="/res" >注册</router-link>
<router-link to="/xxx" >异常演示</router-link>
<!-- 直接使用a标签要加# -->
<a href="#/login"> 是</a>
</div>
六、路由带参
怎么传?
a.restful风格 以占位符的形式
当路由变为xxx的时候要显示的式xx组件,同时要给这个组件传n个参数
1)restful风格 以占位符的形式,但是每个占位符参与路由筛选的过程
http://localhost/#/1/2/3
/1/2/3 即是参数也是路由规则
path:"/:a/:b" 就必须完全匹配才能找到的
b.查询字符串的方式
2)查询字符串的方式,跟传统的url地址传参的形式一样,参数包括
问号在内的字符串式不参与路由筛选的过程
http://localhost/login?x=1
其中?x=1不属于路由配置path ,只有login是path要筛选的
怎么取?
a.route−−>以route−−>以开头的组件与实例通用
查询字符串
http://localhost/hongjilin.html?a=11#/login/1/2?a=111
fullPath: "/login/1/2?a=111"
hash: ""
matched: [{…}]
meta: {}
name: undefined
params: {0: "/login/1/2"}
path: "/login/1/2"
query: {a: "111"}
//vm.$route.query....
(6.3)具体代码示例
1.query方式传参数
this.$router.push({path: '/user', query: {id: '27001'}});
// 获取参数方式:
this.is = this.$route.query.id;
2.params 方式传递参数
this.$router.push({name: 'user', params: {id: '27001'}});
// 获取参数方式
this.id = this.$route.params.id;
-------------------------------------------------------------------------------------------------
需要注意的是使用params传参的时候, 路由配置必须按照以下方式来配置, name属性必须有, path后面必须写上传递的参数名, 这样才能保证刷新页面的时候, 参数不会被丢失.
{
path:'/user/:id',
name: 'user',
component: (resolve) => { require(['../components/user/index.vue'], resolve)}
},
路由器嵌套
1.前端template代码示例
<transition mode='out-in'>
<router-view>
</router-view>
</transition>
---------------------------------------------------------------------
<!-- template最好不要在容器里面 -->
<template id="father">
<div style="background-color: aquamarine;">
<h1>我是父亲</h1>
<router-view></router-view>
</div>
</template>
2.js端代码示例以及注意事项
{
path:'/father',
component:fater,
children:[
{//如果加了/ 代表不能是father/regist 而是直接根目录到regist
path:'regist', //father(只显示父亲) //father/regist(在显示父亲的之后再显示儿子)
//定义的组件
component:res,
}
]
},
全部代码示例
1.前端html
<div id="app">
<transition mode='out-in'>
<router-view>
</router-view>
</transition>
<div>
<!-- 使用路由 -->
<router-link tag="div" to="/login" >登录</router-link>
<router-link to="/res" >注册</router-link>
<router-link to="/xxx" >异常演示</router-link>
<!-- 直接使用a标签要加# -->
<a href="#/login"> 是</a>
</div>
</div>
<div>--------------------------------------------------------</div>
<!-- template最好不要在容器里面 -->
<template id="father">
<div style="background-color: aquamarine;">
<h1>我是父亲</h1>
<router-view></router-view>
</div>
</template>
<template id="login">
<div>
<!-- 绑定 -->
<h1 @click="$emit('hong',1,2,3,4)">login</h1>
<h1 @click="$emit('dier',1,2,3,4)">惦记我调用第二份父亲方法</h1>
</div>
</template>
<template id="login1">
<div>
<h1 @click="$emit('hong',1,2,3,4)">login</h1>
<h1 @click="$emit('dier',1,2,3,4)">sss</h1>
</div>
</template>
<template id="regist">
<div>
<h1>注册</h1>
<h1>zzz</h1>
</div>
</template>
<!-- template最好不要在容器里面 -->
<template id="error">
<!--template的根容器只能有一个 -->
<div>
<!-- <h1 v-text="msg" @click="say()"></h1> -->
<h1>错误找不到</h1>
<h1>zzz</h1>
</div>
</template>
2.路由代码示例
import Vue from '../lib/vue-2.4.0'
import './index.scss'
import VueRouter from '../lib/vue-router-3.0.1'
//通过import需要通过use进行挂载
Vue.use(VueRouter)
const login={
template:'#login',
data() { return { msg:222 } },
methods:{ say(){alert("我是xxx") }}
}
const res={
template:'#regist'
}
const fater={
template:'#father'
}
const error={
template:"#error"
}
//使用路由的时候将所有组件注册放出来定义
//必须在实例的作用域内
const router = new VueRouter({
//路由匹配从上到下,匹配到一个不匹配
routes:[
{
path:'/',
//重定向到/login
redirect:'/login'
},
{
path:'/login',
//定义的组件
component:login,
},
{//这是嵌套组件
path:'/father',
component:fater,
children:[
{//如果加了/ 代表不能是father/regist 而是直接根目录到regist
path:'regist', //father(只显示父亲) //father/regist(在显示父亲的之后再显示儿子)
//定义的组件
component:res,
}
]
},
{ //最后找不到的
path:'*',
component:error
}
]
})
window.vm=new Vue({
el:'#app',
data:{
msg:"hello world",
list:[
1,2,3,4,5
],
flag:false,
jilin:'login'
},
//将定义的路由挂载上来,key与value相同可以缺省
router,
methods: {
del(index){
this.list.splice(index,1)
},
fater(...son){
alert("我是父亲"+son);
},
fater2(...son){
alert("我是第二份父亲"+son);
},
},
components:{
// res
//再外面定义后可以直接引入
}
})
总结：router-link和router-view的知识点不复杂，需要慢慢磨合，还是那句话，一步步来，加油！
