vue路由router,routes,route

Posted 2023-03-10

参考技术A SEO：搜索引擎优化，
前端路由：控制页面访问路径，单页面应用
后端路由：控制接口

1，URL的hash,location.hash
2,html5的history模式，history.pushState(data,title,url)

使用vue create '文件名'，创建一个vue脚手架，

vue.use(VueRouter),调用vue-router这个对象上面的install方法，注册两个属性在vue原型对象上，分别是vue.prototype.$router(整个项目的路由对象)和vue.prototype.$route(当前活跃的路由对象)

实例化一个VueRouter对象

router-link相当于a标签，跳转页面。router-view相当于一个占位符，把现在页面访问的路径内容加载进来，替换掉router-view

vueRouter跳转页面的方式有用this.$router.push('/home')，this.$router.replace()和用标签<router-lin>

this.$router.push('/home?key='+vaule+'&key1='+vaule1)。在另一个页面用this.$route.query获取传过来的值

第一种
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

接收参数

第二种
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

接收参数都是一样
第三种

在路由规则里定义如下

pid是一个变量，在用这个动态路由的时候可以

懒加载是当你点击一个页面时，先缓存所有的链接，不执行，只执行那个页面的资源，这样可以提升效率，提高响应速度。
路由懒加载很简单，在component用import引入组件，如下：

router相当于一个路由器，路由器里面有路由表，既routes，表中很多路由规则，route是routes的一个个路由规则