Skip to content

21.安装vue-router

sh
npm install vue-router

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

创建router目录,在router目录下创建index.js

js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
import A from '@/components/A'
import B from '@/components/B'

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/aaa',
      name: 'A',
      component: A
    },
	{
	  path: '/bbb',
	  name: 'B',
	  component: B
	}
  ]
})

在main.js中引入

js
import Vue from 'vue'
import App from './App.vue'


// import VueRouter from 'vue-router'

import router from  './router'


Vue.config.productionTip = false


new Vue({
 router,
  render: h => h(App),
}).$mount('#app')

在App.vue中使用路由

html
<router-link to="/aaa">aaa</router-link>
&nbsp;&nbsp;&nbsp;
<router-link to="/bbb">bbb</router-link>
		
<router-view></router-view>

Released under the MIT License.