npm安装
npm install vue-router
与模块系统一起使用时,必须通过Vue.use()以下方式显式安装路由器:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1 id="app">
<h1>Hello App!</h1>
<p>
<!--使用路由器链接组件进行导航。-->
<!--通过传递“to”属性指定链接。-->
<!--默认情况下,`<router link>`将呈现为`<a>`标记-->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!--路由出口-->
<!--与路由匹配的组件将在此处呈现-->
<router-view></router-view>
</div>
javascript:
// 0. 如果使用模块系统(例如通过vue cli),导入Vue和VueRouter
// 需要输入Vue.use(VueRouter)
。
// 1. 定义路由组件
//这些文件可以从其他文件导入
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义一些路由
//每条路由都应该映射到一个组件,“组件”可以
//或者是通过Vue.extend()
,或者只是一个组件选项对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建路由器实例并传递“routes”选项
//你可以在这里输入其他选项,但是让我们
//暂时保持简单。
const router = new VueRouter({
routes // short for `routes: routes`
})
//4.创建并装载根实例
//确保向路由器注入router选项以使整个应用程序路由器感知。
const app = new Vue({
router
}).$mount('#app')
//现在应用程序已经启动!
通过注入路由器,我们可以访问它this. r o u t e r 以 及 t h i s . router以及this. router以及this.route任何组件内部的当前路由:
// Home.vue
export default {
computed: {
username() {
// 我们很快就会知道“params”是什么
return this.$route.params.username
}
},
methods: {
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}
}
}
在整个文档中,我们将经常使用该router实例。请记住,this.$router
这与使用完全相同router。我们之所以使用它,this.$router
是因为我们不想将路由器导入每个需要操纵路由的组件中。