Vue-router教程
vue的router跳转界面
配置router
// 导入vue-router 或者在创建工程的时候选择添加router
npm install vue-router --save
// 新建router文件,用于配置路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'MainHome',
component: MainHome
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/user/:name',
name: 'user',
component: User
}
]
})
// 在main.js中导入该路由配置文件并使用
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});
在APP模板里添加<vue-router>
用于展示路由中的模板,可以是哟<vue-link to="">
跳转
<template>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link to="/user/大海">大海</router-link>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>