vue-router-1-安装与基本使用

Posted 2020-10-10 不了无明

npm install vue-router

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

Vue.use(VueRouter)

//使用最新的开发版
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

 <div id="app">
　　<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
　　 <!-- 路由匹配到的组件将渲染在这里 -->
   <router-view></router-view>
</div>

// 1. 定义（路由）组件,可以 import 进来
const Foo = { template: ‘<div>foo</div>‘ }

// 2. 定义路由
const routes = [
  { path: ‘/foo‘, component: Foo },
]

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例,通过 router 配置参数注入路由，
const app = new Vue({
  router
}).$mount(‘#app‘)