1, the installation route plug-ins
npm install --save vue-router
2, write two vue components, home.vue and about.vue in the components directory
<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, create the following files in the src directory 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, add a few lines about the 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, reference assembly App.vue
<Template> <div ID = " App " > <IMG the src = " ./assets/logo.png " > <-! <the HelloWorld /> -> a <header> <-! Router-Link after defining which path click to navigate to the next -> <Link Router-to = " / Home " > Home </ Router-Link> <-Link to Router = " / About " > the About </ Router-Link> </ header > <! - component corresponding to the content rendered to the 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-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>