2024年06月21日 建站教程
Vue Router是Vue.js的官方路由管理器，它与Vue.js的核心深度集成，可以轻松构建单页面应用。下面web建站小编给大家简单介绍一下如何定义一个路由！
1、安装 vue-router 包
npm install vue-router
2、导入并 Vue.use()
import VueRouter from 'vue-router' Vue.use(VueRouter)
3、定义路由组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
4、配置路由规则
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
5、创建Router实例
const router = new VueRouter({
routes
})
6、在根组件中挂载Router
new Vue({
router,
render: h => h(App)
})
7、在模板中使用 router-link 进行导航
<router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link>
8、使用 router-view 渲染匹配的组件
<router-view></router-view>
本文链接：http://so.lmcjl.com/news/6975/