好嘞，咱们先琢磨琢磨vue这货，啥网站毛病儿都行。今儿就说说Vue里的“路径”玩法儿，也就是咋在不同的页面上瞎逛悠。搞到个vue-router的神器，学会用过后，你的网页看起来也高大上不少！
npm install vue-router
创建Vue Router对象并绑定到Vue实例中
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
// 路由配置
})
new Vue({
router
}).$mount('#app')
搞定Vue项目切换问题，来，看这里！先在main.js文件中，导入个叫Vue Router的神奇工具，然后把它“粘”在你的Vue实例上面。接下来，利用这个Vue Router里面的功能，手把手教你怎么搞网页导航。就这么简单！现在，你可以尽情地玩转网页路由了！
配置Vue Router对象
VueRouter确实有点麻烦，但是记住，要规划好你想去哪儿取哪个组件，这样才能胜利抵达目的地哈!比如想去某网站?设定好路径就行;然后跟它说你需要什么组件，这样就能轻松到了。如果要搞定单个页面的路由规则，就照着手册来操作。
const router = new VueRouter({
routes: [
{
path: '/about',
component: About
}
]
})
不用router-link也行，咱们能用router.push开新页面的！
VueRouter真的是神器级别的存在！换页面就跟咱们吃火锅收拾碗筷似的，好方便！我教你两招，第一招，跟平时链接网页一样，把正确的URL输入进去就行了；第二招则专门给有技术含量的小伙伴们准备的，你需要先在vue组件中找到$router这个Vue Router对象，最后用它的push方法轻轻一点，页面就切换成功。不管你喜欢哪一招，都随心所欲呗~
关于我们
介绍Vue-Router
vue-router超好用的，它是官方出品的专业管理路由的大杀器，最亮点就是可以层层嵌套路由，动态配置路由，还能懒加载。装上之后，别忘了搞清楚是用哪一部分来让网页换页哟。这时候，只要用createRouter这个小窍门，立马就能拿到路由实例了，然后把它跟整个Vue应用捆绑好，就全世界都能享受到。
this.$router.push('/about')
使用router-view和router-link组件
别纠结怎么搞跳转，Vue.js的router-view和router-link帮你简单省事！模板里加上个参数，想看啥时候的信息都行，图片大小也能随心调节。这不，做出来的链接实用又美观！
多种方式实现路由跳转
刚才说的那几个办法只是小小的一部分，其实网页转场的手法花样还很多！比如说，你试试看Vue里头的router.Push，这个功能可好用，直接丢个动态参数就搞定页面跳转！不论你喜欢啥样的，5花8门随便挑，肯定能让你应对自如！
npm install vue-router --save
总结与展望
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/user/:id',
component: User
}
]
读完这篇文章，朋友们得赶紧上手试试vue-router的超牛导航功能！这货简直就是个全能助理，想看哪个页面就能轻松切换，新出炉的花样功能也层出不穷。搞快点，等你来了深入发掘更多精彩内容的话，相信不会失望的！
咱们今天聊聊Vue那个”跳过”功能希望对正在学习或使用这个工具的朋友有帮助。有什么问题的话，欢迎留言讨论
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes
})
。
评论0