如何切换 Vue 路由？创建路由对象，指定路径和组件。将路由对象传递给 Vue 实例。在模板中使用 链接到其他路由。在 JavaScript 中使用 this.$router.push 或 this.$router.replace 在程序中切换路由。
Vue 路由切换
在 Vue.js 应用程序中，可以通过使用路由器来切换路由。
切换路由的步骤：
-
创建路由对象：使用
VueRouter实例创建一个路由对象，它指定了要显示的组件以及匹配的路径。 -
将路由对象传递给 Vue 实例：通过
router选项将路由对象传递给 Vue 根实例，以便将其与应用程序相关联。 -
在模板中使用路由链接：使用
-
在 JavaScript 中编程方式切换路由：使用
this.$router.push(path)或this.$router.replace(path)方法在 JavaScript 中编程方式切换路由。
详细说明：
立即学习“前端免费学习笔记（深入）”；
TayCMS免费企业建站系统1.8 for PHP
下载
由于精力有限，程序更新比较慢，请大家谅解，再次感谢支持taycms的朋友们，虽然比较慢，我们还是会一直更新下去的。谢谢您的关注。有什么建议可以到论坛提出，或者直接给我QQ留言。 2.0会有很多新功能，请关注官方论坛TayCMS 1.8 升级日志此版本修复了不少BUG1.更换图片切换JS ， 不会再有错误提示2.增加资料下载模块3.更换默认模版，使程序功能和页面结构更清晰，方便参考制作模版4.修复留
创建路由对象：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
});将路由对象传递给 Vue 实例：
new Vue({
router,
el: '#app'
});在模板中使用路由链接：
Home About
在 JavaScript 中编程方式切换路由：
this.$router.push('/about'); // 推送新的路由到历史记录栈
this.$router.replace('/about'); // 替换当前路由历史记录栈中的当前条目 
