在vue-cli中使用路由

1.首先npm中是否有vue-router

一般在vue-cli的时候就已经下载好了依赖包了

2.使用vue的话正常的需要涉及这几个文件

demo/src/router/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import Vue from 'vue' import Router from 'vue-router' import Hello from '../components/Hello'//首页 import Test from '../components/test'//需要跳转的页面 给组件重新命名   Vue.use(Router)   export default new Router({   routes: [     {//首页       path: '/',       name: 'Hello',       component: Hello     },     {//需要跳转的页面         path:'/test',         name:'test',         component:Test//组件名字     }   ] })

 demo/src/app.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<template>   <div id="app">     <img src="./assets/logo.png">     <p>     <router-link to="/home">home</router-link>//跳转首页     <router-link to="/test">test</router-link>//跳转新页面     </p>     <router-view></router-view>//页面渲染放置的部分   </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>

　demo/src/main.js

1 2 3 4 5 6 7 8 9 10 11 12 13

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 } }).$mount('#app')//实例挂载到元素中

　　两个页面的组件

这样的话，基本的路由设置就好了，可以按照正常的npm run dev运行这个项目了

另外还有嵌套 自定义多种路由

具体的路由内容可以查看：https://router.vuejs.org/zh-cn/installation.html