vue-router的安装与使用

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 .$ 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是因为我们不想将路由器导入每个需要操纵路由的组件中。

vue-router的安装与使用

猜你喜欢