阅读 198

vue-cli中引入vue-router(vue-cli(vue脚手架)超详细教程)

1.安装Vue-router

npm install vue-router 复制代码

2.简化文件夹路径

src同级建立vue.config.js

// vue.config.js module.exports = {   configureWebpack: {     resolve: {       alias: {         'assets': '@/assets',         'components': '@/components',       },     }   } } 复制代码

3.建立路由对应组件

src同级建立router/index.js文件

import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); const routes = [   {     path: "/test1",     component: () => import('@/components/Test1.vue'),   },   {     path: "/test2",     component: () => import('@/components/Test2.vue'),   }, ]; const router = new VueRouter({   routes }) export default router; 复制代码

4.将路由挂载到vue实例上

import Vue from 'vue' import App from './App.vue' import router from './router/index' new Vue({   render: h => h(App),   router, }).$mount('#app') 复制代码

5.路由对应的组件页面

Test1.vue

<template>   <div class="hello">      test1   </div> </template> 复制代码

Test2.vue

<template>   <div class="hello">     test2   </div> </template> 复制代码

6.路由匹配到的组件渲染

app.vue

<template>   <div id="app">     <router-view/>   </div> </template> <script> export default {   name: 'App', } </script> 复制代码

7.演示

测试8.gif


作者:小橘子爱唠嗑
链接:https://juejin.cn/post/7028768362255613965


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐