vue-router 学习
1、
参考一篇文章,Vue快速入门!!!
2、Content.vue
<template>
<div>
<h1>内容页</h1>
</div>
</template>
<script>
export default {
name:"Content"
}
</script>
3、kikyo.vue
<template>
<div>
<h1>kikyo</h1>
</div>
</template>
<script>
export default {
name:"kikyo"
}
</script>
4、Main.vue
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default {
name:"Main"
}
</script>
5、/router/index.js
import Vue from 'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Content from '../components/Content'
import Main from '../components/Main'
import kikyo from "../components/kikyo";
//安装路由
Vue.use(Router);
//配置路由
export default new Router({
routes: [
{
//路由路径
path: '/content',
//路由名称
name: 'content',
//跳转到组件
component: Content
}, {
//路由路径
path: '/main',
//路由名称
name: 'main',
//跳转到组件
component: Main
}
, {
//路由路径
path: '/kikyo',
//路由名称
name: 'main',
//跳转到组件
component: kikyo
}
]
});
6、APP.vue
<template>
<div id="app">
<!--
router-link:默认会被渲染成一个<a>标签,to属性为指定链接
router-view:用于渲染路由匹配到的组件
-->
<h1>kikyo</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容</router-link>
<router-link to="/kikyo">kikyo</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
7、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,
components: { App },
template: '<App/>'
})
8、报错You are using the runtime-only build of Vue where the template compiler is not available
修改/build/webpack.base.conf.js文件,改为以下配置
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的
}
},