文章目录
前言
在使用路由之前，必须先引入 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路由的其他知识点。
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
