Vue 路由 vue -router的简单应用

 

1 <router-view></router-view>

在根组件中合适的位置添加  标签  <router-view></router-view>

2 安装 vue-router

cnpm i --save vue-router

3 配置main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//  引入根应用
import App from './App.vue'
//  引入组件
import Home from './Home.vue'
import One from './One.vue'

// 引用 路由
Vue.use(VueRouter)

// 建立路由数组
const routes = [
  // path: 路由路径, component: 组件
{ path: '/home', component: Home },
{ path: '/One', component: One }
]
// 创建 路由（router） 对象
const router = new VueRouter({routes})

// 应用初始化
new Vue({
  // 在节点 #app 上渲染根应用 App
  el: '#app',
  render: h => h(App),
  // 将路由提供给应用
   router,
})