路由基础使用看另一篇文章:路由基础使用和路径传参
基本属性
path: '/', //主路径，也就是路由路径
alias: ['/myfarie'], //路径别名，即访问该路径时，也会访问到该资源
name:'farie' //设置名字，占位符传参时需要使用
component:()=> import('../views/index.vue'), //绑定页面资源
children:[{...},{...}] //子页面，后面会讲
redirect:'/xxx' //重定向用，后面讲补充说明：
alias设置别名传的是一个数组，也就是可以设置多个别名。
注意path设置路由路径，后面再讲到这里都会使用这个称呼。
router-link页面跳转
固定传参
在不需要传参以及目标页面资源的路由路径不会经常变动时，我们可以使用属性 to：
<template>
<h1>我是主页</h1>
<br>
<h1>跳转按钮:</h1>
<router-link to="/farie?num=666">跳转farie</router-link>
<br>
<router-view></router-view>
<br>
<footer>我是主页尾部</footer>
</template>在这里，每次跳转传递的都是固定的路径信息，浏览器拿到的就是to属性对应的字符串。
动态参数
在需要传参时，我们可以使用:to实现动态绑定。
<template>
<h1>我是主页</h1>
<h1>跳转按钮:</h1>
<router-link :to="{path:'/farie',query:{num:666}}">跳转farie</router-link>
<br>
<router-view></router-view>
<footer>我是主页尾部</footer>
</template>这样还不够，我们还可以搭配script块中的数据使用：
<script setup>
import {ref} from "vue";
const fariepath = ref({
farie:'/farie',
fquery:{
num:666
}
})
</script>
<template>
<h1>我是主页</h1>
<h1>跳转按钮:</h1>
<router-link :to="{path:fariepath.farie,query:fariepath.fquery}">跳转farie</router-link>
<br>
<router-view></router-view>
<footer>我是主页尾部</footer>
</template>占位符传参
之前配置路由信息时提过一个属性name，在我们占位符动态传参时会使用，就是在这里:
<template>
<h1>我是主页</h1>
<h1>跳转按钮:</h1>
<router-link :to="{name:'flower',params:{uid:220013025}}">跳转flower</router-link>
<br>
<router-view></router-view>
<footer>我是主页尾部</footer>
</template>在占位符传参时，我们参数使用的不是query而是params。同时，如果使用path，那么页面会拿不到值，我们需要使用name来指定目标资源。
编程式导航
编程式导航实际意思是，通过用户的一些操作来实现页面的跳转，例如登录成功后跳转个人首页等等。为了方便演示，我的示例中使用的是点击(chilk)事件。
基本步骤：
1.import我们的useRouter方法，用来获取router对象。
2.通过router对象的push方法，上传我们的路径信息（当然，一般会写在方法里面，通过事件触发）。
<script setup>
import {useRouter} from "vue-router";
const router = useRouter();
const tofarie = ()=> {
router.push({path:'/farie',query:{num:666}});
}
const toflower = ()=> {
router.push({name:'flower',params:{uid:220013025}});
}
</script>
<template>
<h1>我是主页</h1>
<h1>跳转按钮:</h1>
<button @click="tofarie">跳转farie</button>
<button @click="toflower">跳转flower</button>
<br>
<router-view></router-view>
<footer>我是主页尾部</footer>
</template>嵌套路由
嵌套路由就来到了我们前面提到的children属性。
指的是我们网页中嵌套了其他的网页资源，换到编程的视角就是父子组件。在什么场景使用呢？比如某个产品的网站，上边一个导航栏，中间是各种不同内容的分页。
举个页面为例子：百度翻译 可以去看看
步骤：
1.在路由信息中配置好子页面的路径：
2.在主页面中使用标签<router-view></router-view>，用于布置嵌套的页面资源
在原生的html中也有这种页面嵌套。
重定向
重定向使用属性redirect，主要功能就是，当你访问该路径时，给你跳转到另一个路径。
比如我下面的示例就是，当访问/other时，跳转到/myfarie。
