在vue-cli中使用路由

Posted 2020-11-06 byd张小伟

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