1, 安装路由插件
NPM install --save vue-router
2, 在 components 目录下编写两个 vue 组件, home.vue 和 about.vue
- <template>
- <div>
- <h1>about</h1>
- <p>{{aboutMsg}}</p>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- aboutMsg: '我是 about 组件'
- }
- }
- }
- </script>
- <template>
- <div>
- <h1>home</h1>
- <p>{{msg}}</p>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- msg: "我是 home 组件"
- }
- }
- }
- </script>
3, 在 src 目录下面创建 router.JS 文件
- import Vue from "vue";
- import VueRouter from "vue-router";
- // 引入组件
- import home from "./components/home.vue";
- import about from "./components/about.vue";
- // 要告诉 vue 使用 vueRouter
- Vue.use(VueRouter);
- const routes = [
- {
- path:"/home",
- component: home
- },
- {
- path: "/about",
- component: about
- }
- ]
- var router = new VueRouter({
- routes
- })
- export default router;
4, 在 main.JS 中添加一下几行
- // The Vue build version to load with the `import` command
- // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
- import Vue from 'vue'
- import App from './App'
- import router from './router.js'
- Vue.config.productionTip = false
- /* eslint-disable no-new */
- new Vue({
- el: '#app',
- router,
- components: { App },
- template: '<App/>',
- })
5, 在 App.vue 引用组件
- <template>
- <div id="app">
- <img src="./assets/logo.png">
- <!-- <HelloWorld/>-->
- <br/>
- <header>
- <!-- router-link 定义点击后导航到哪个路径下 -->
- <router-link to="/home">Home</router-link>
- <router-link to="/about">About</router-link>
- </header>
- <!-- 对应的组件内容渲染到 router-view 中 -->
- <router-view></router-view>
- </div>
- </template>
- <script>
- import HelloWorld from './components/HelloWorld'
- import MyVue from './components/MyVue'
- export default {name: 'App',
- components: {HelloWorld,
- MyVue
- } // 组件注册
- }
- </script>
- <style>
- #App {
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-OS X-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
- }
- </style>
来源: http://www.bubuko.com/infodetail-3437743.html