Vue.js——路由router-link

原创

于 2019-03-25 00:44:03 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #路由

本文详细介绍了 Vue.js 中的路由组件 `router-link` 的使用，包括如何在 HTML 代码中声明 `router-link`，以及对应的 JavaScript 配置和路由创建过程，帮助读者深入理解 Vue 路由机制。

html代码

<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

js代码

定义（路由）组件。
定义路由
创建 router 实例，然后传 routes 配置
创建和挂载根实例。

//(1)
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

//(2)
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]

//(3)
const router = new VueRouter({
		routes
})

//(4)
const app = new Vue({
		router
}).$mount('#app')