vue中路由的使用
管理前台页面跳转，不同界面使用不同的vue组件
vue-router的安装
npm install vue-router
vue-router配置
在用vue-cli构建的项目结构中，在main.js中已经添加了
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
在router文件夹中的index.js文件中可以写对应的路由规则：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../Home'
import SpecialPage from '../SpecialPage'
import Detail from '../Detail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/SpecialPage/:id',
name: 'SpecialPage',
component: SpecialPage
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
]
})
在App.vue中
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
font-size : 20px;
margin: 0 auto;
padding: 0;
}
</style>
<router-view></router-view>会替换成不同的路由里面的组件