柚子快报激活码778899分享：vue2-路由

http://www.51969.com/

安装路由插件

npm i vue-router@3

插件需要use一下，main.js

import Vue from 'vue'

import App from './App.vue'

// 引入路由

import Router from 'vue-router'

// 引入路由器

import router from './router'

// 引入ui

// import {Button,Upload, Image,Avatar} from 'element-ui'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

// 应用路由

Vue.use(Router)

//注册ui组件

// Vue.component('el-button',Button)

// Vue.component('el-upload',Upload)

// Vue.component('el-image',Image)

// Vue.component('el-avatar',Avatar)

Vue.use(ElementUI);

new Vue({

render: h => h(App),

router:router

}).$mount('#app')

在src/下面新建router/index.js

// 该文件专门用于创建整个应用的路由器

import Router from 'vue-router'

// 引入组件

import Task from '../components/Task'

import UpdateCase from '../components/UpdateCase'

import Readme from '../components/Readme'

import NodeManage from '../components/NodeManage'

export default new Router({

routes:[

{

path:'/',

component:Readme

},

{

path:'/task',

component:Task

},

{

path:'/updatecase',

component:UpdateCase

},

{

path:'/nodemanage',

component:NodeManage

}

]

})

点击元素跳转对应的组件：需要一个特殊标签 router-link  代替a标签

最后一步就是在哪里展示了：App.vue

 

 

 

柚子快报激活码778899分享：vue2-路由

http://www.51969.com/

查看原文