文章目录
前言
在使用路由之前,必须先引入 router 插件,推荐大家去官网安装
或者,直接复制下面这行代码放进自己的项目里
https://unpkg.com/vue-router@4.4.3/dist/vue-router.global.js
也可以点开这个链接,去把里面的代码全都复制到一个自己的 js 文件中。
1. URL
在vue环境中,路由就是组件与url地址的一种映射关系!
组件不用多说,想详细了解可以看我的另一篇博客Vue组件基础篇,而 url 地址则是(下图):
看上去好像很乱,但只要抓住关键点 看就行了(这里画圈的是域名,经过DNS解析会变成ip地址,最终被浏览器识别)
接着看,这里圈住的其实就是组件了,也就是HTML文件。
在问号后面的,则是在路由中传递的参数,也叫动态路由传参,接下来会详细说明。
这些参数也很简单,就是一些 键值对,也就是对象中的 属性和值。不同属性之间用 & 连接。
2. 路由模式
上面的知识点中,参数是在 ? 后面的,这种模式叫做 HTML5 历史模式 简称 历史模式
这种模式的特点是,?后面参数的改变会触发服务器请求,然后刷新整个页面!
const router = createRouter({
history: createWebHistory(), // 这里需要参数,在非脚手架环境下,使用可能会出错!!
routes
})
另一种模式是 Hash模式 ,在此模式中,参数会写在 # 后面,并且 #后面参数的改变,不会触发浏览器请求!
const router = VueRouter.createRouter({
history:VueRouter.createWebHashHistory(),
routes
})
app.use(router)
app.mount('#app')
如果是在 Vue脚手架环境下,推荐使用 历史模式,因为Vue项目一般都是单页面应用程序,也就是只有一个页面。
但我的博客暂时还没有更新到脚手架环节,所以,下面的示例和知识点详解,我选择使用 Hash模式。
2. 基础用法
vue-router 给我们提供了两个组件,router-link 和 router-view
router-link
<router-link to="/"> 首页 </router-link>
可以把 router-link 理解为一个a标签,它使用 to 属性来设置需要跳转的 url地址,并且,Vue Router可以在不重新加载页面的情况下更改URL,处理URL的生成以及编码
router-view
<router-view></router-view>
router-view就简单了,它会显示与url对应的组件。你可以把它放在任何地方,以适应你的布局。
上面是一些基本概念,下面举个例子,让大家有一个更清晰的了解:
大家注意观察 url 地址的变化( 组件和url地址的映射关系,这就是路由!!! )
(可以直接复制下面的代码,多点点,试着改一改组件,相信大家可以很轻松的学会)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
.ul li{
width: 100%;
border-radius: 10px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px 0 #ccc;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<router-view></router-view>
<router-link to="/">首页</router-link>
<router-link to="/xinwen">新闻</router-link>
<router-link to="/wode">我的</router-link>
</div>
</div>
</body>
<script src="../vue.global.js"></script>
<script src="../axios.min.js"></script>
<script src="https://unpkg.com/vue-router@4.4.3/dist/vue-router.global.js"></script>
<script>
let app = Vue.createApp({
data(){
return {
}
},
created(){
},
methods:{
}
})
let shouye = {
template:`
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
`
}
let xinwen = {
template:`
<div>
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
</div>
`
}
let wode = {
template:`
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
`
}
let routes = [
{
path:'/',
component:shouye
},
{
path:'/xinwen',
component:xinwen
},
{
path:'/wode',
component:wode
}
]
let router = VueRouter.createRouter({
history:VueRouter.createWebHashHistory(),
routes
})
app.use(router)
app.mount('#app')
</script>
</html>
router-link 的灵活使用
在使用router-link设置要跳转的路由地址时,有几种不同的写法,大家可以自行选择
直接写字符串
<router-link to="/">首页</router-link>
绑定属性( 通过path属性设置,值同样是字符串 )
<router-link :to="{ path: ' / ' }">首页</router-link>
绑定属性( 通过name属性设置,值同样是字符串,但这里绑定的就是 组件名字了 )
<router-link :to="{ name: ' home ' }">首页</router-link>
router-link 还支持一个 replace 属性: 设置页面栈的替换。
篇幅有限,这里就不过多解释了,感兴趣的可以自行百度,
4. 动态路由匹配
路由传参
想要完成路由传参,首先,就是你的这条路由,他允许传参!!
上面的这几条路由 都是没有开启路由传参的,怎么开启呢?
此时,在跳转到此条路由时,就需要把对应的参数带上,要不然会报错!!!
下面是三种传参方式(推荐使用第三种)
<router-link to="/xinwen/hello">新闻</router-link>
<router-link :to={path:"/xinwen/hello"}>新闻</router-link>
<router-link :to={name:'xinwen',params:{name:'Hello'}}>新闻</router-link>
如果想使用第三种方式,记得还要在路由信息中,设置一个name属性
获取参数
在组件中通过 $route 对象的 params属性来获取对应的参数
console.log(this.$route);
$route 对象 可以简单理解为,这条路由的基本配置信息
里面的 params 存的就是 你传过来的 参数。
其实还有一种传参方式, query传参,但它只能使用 直接写 路径的方式完成传参,对我来说,并不好用(我反正没用过)
query传参
传参
<router-link class="btn btn-default" to="/news?id=10">新闻</router-link>
接收
this.$route.query
路由参数数量不固定
我们在传递参数的时候,一般都不会只传递一个参数,那么我们要如果传递多个参数呢?
在设置动态路由的时候,同时使用 正则修饰符!!!
* 0个或多个
+ 1个或多个
? 0个或1个
{
path:'/mine/:userid+',
name:'mine',
component: Mine
}
5. 嵌套路由
在设置路由信息时,可以通过 children 属性,再绑定一组路由数组,此时,这个数组里的路由就是当前路由的子路由。
这里再说一个属性 redirect 路由重定向
顾名思义,就是跳转的这条路由时,如果当前路由设置了 redirect 属性,它会自动跳转到 redirect 所绑定的路由去!
5. 编程式导航
在上面的逻辑中,我们都是通过点击 router-link 标签,完成的路由跳转。
那如果我想在方法中完成跳转呢?
这里我们再学习一个对象 $router
它和上面的 route 可不一样,不要弄混了!!!
让我们先看看 $router 是什么
console.log(this.$router);
乱七八糟的属性很多,我们也不用全都都了解,只了解几个重要的就可以了。
push
跟 router-link 中 to 的用法几乎一模一样
replace
带页面栈替换 的 跳转
总结
以上就是vue路由基础篇的所有内容,大家通过练习就可以轻松学会并掌握vue路由的基础知识和用法。
下一篇 vue路由进阶篇,将会讲述关于vue路由的其他知识点。