【Vue实战教程】之 Vue Router 路由详解
warning:
这篇文章距离上次修改已过195天，其中的内容可能已经有所变动。
// 引入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
// 告诉Vue使用VueRouter
Vue.use(VueRouter)
// 创建路由实例
const router = new VueRouter({
mode: 'history', // 使用HTML5 History模式
routes: [ // 定义路由规则
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
// 创建Vue实例，并使用router
new Vue({
router // 使用router
}).$mount('#app')这段代码展示了如何在Vue应用中设置Vue Router，并定义了两条路由规则：一条是主页(/)，一条是关于我们页(/about)。它使用了Vue Router的History模式，允许我们使用正常的URL路径，而不是哈希模式的URL。最后，将router挂载到Vue实例上，并通过#app元素挂载到DOM中。
评论已关闭