vue-router入门

1、新建src/router.js

2、src/main.js　　

 

//导入vue和新建的router.js　　　

import Vue from 'vue'

import router from './router.js'

3、src/router.js

//导入vue和vue-router

import Vue from 'vue'

import VueRouter from 'vue-router'

 

//使用vue-router（名称为VueRouter，可以随便取）

Vue.use(VueRouter)

 

//定义组件模板内容

const first = {template:'<div>这是first内容</div>'}

const second = {template:'<div>这是second内容</div>'}

const Home = {template:'<div>这是Home内容</div>'}

 

//定义组件路径

const router = new VueRouter({

mode:"history",

base:__dirname,

routes:[          //routes

{path:"/",component:Home},

{path:"/first",component:first},

{path:"/second",component:second}

]

})

 

　　　　     //使用组件

new Vue({

router,

template:`

<div id="r">

<ul>

               //router-link to=“指向的组件路径”

<li><router-link to="/">/</router-link></li>                 

<li><router-link to="/first">first</router-link></li>

<li><router-link to="/second">second</router-link></li>

</ul>

<router-view class="abc"></router-view>          

       //router-view组件显示区域

</div>

`

}).$mount("#app")        //组件挂载（index.html中定义的div的id为app）

 

4、运行npm run dev，页面显示效果为

！！导入.vue文件模板，import parent from './transition.vue'