入门
用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子:
App.vue
<template>
<div id="hzh">
<h1>你好!黄子涵!</h1>
<p>
<!-- 使用 router-link 组件进行导航 -->
<!-- 通过传递 `to` 来指定链接 -->
<!-- `<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签 -->
<router-link to="/home">去首页</router-link>
<router-link to="/about">去关于</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
methods: {
},
components: {
},
};
</script>
<style>
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: () => import('../components/Home.vue'),
},
{
path: '/about',
name: 'About',
component: () => import('../components/About.vue'),
},
]
})
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router: router,
components: { App },
template: '<App/>',
render:h => h(App),
})
router-link
请注意,我们没有使用常规的
a
标签,而是使用一个自定义组件router-link
来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。
router-view
router-view
将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局。
通过调用
app.use(router)
,我们可以在任意组件中以this.$router
的形式访问它,并且以this.$route
的形式访问当前路由:
要在
setup
函数中访问路由,请调用useRouter
或useRoute
函数。我们将在 Composition API 中了解更多信息。
在整个文档中,我们会经常使用 router
实例,请记住,this.$router
与直接使用通过 createRouter
创建的 router
实例完全相同。我们使用 this.$router
的原因是,我们不想在每个需要操作路由的组件中都导入路由。