Vue-cli3项目案例

我不是女神ヾ 2021-08-19 12:49 351阅读 0赞

新建项目的过程不多说了，参考：[https://blog.csdn.net/qq\_40323256/article/details/100999860][https_blog.csdn.net_qq_40323256_article_details_100999860]

**例1:极简的一个例子**

运行结果：    ![20190920235600800.gif][]                      结构目录： ![20190920235058538.png][]

A.vue

<template>
    	<div>
    		<h1>这是A页面</h1><br />
    		<router-link to="/">返回</router-link>
    	</div>
    </template>

B.vue

<template>
    	<div>
    		<h1>这是B页面</h1><br />
    		<router-link to="/">返回</router-link>
    	</div>
    </template>

Home.vue

<template>
      <div>
       	<router-link to="/a">转向A页面</router-link>
        <router-link to="/b">转向B页面</router-link>
      </div>
    </template>

router.js

import Vue from 'vue'
    import Router from 'vue-router'
    
    import Home from './views/Home.vue'
    import A from './views/A.vue'
    import B from './views/B.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          component: Home
        },
        {
          path: '/a',
          component: A 
        },
        {
          path: '/b',
          component: B  
        }
      ]
    })

App.vue

main.js

import Vue from 'vue'
    
    import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')

**例2：对比例1**

运行结果：![20190921001356435.gif][]      结构目录（和例1一样）： ![20190920235058538.png][]

其他代码和例1相同，不同的是Home.vue和router.js，注意体会代码的不同之处

Home.vue

<template>
      <div>
       	<router-link to="/a">转向A页面</router-link>
        <router-link to="/b">转向B页面</router-link>
        <router-view/>
      </div>
    </template>

router.js

import Vue from 'vue'
    import Router from 'vue-router'
    
    import Home from './views/Home.vue'
    import A from './views/A.vue'
    import B from './views/B.vue'
    
    Vue.use(Router)
    
    export default new Router({
    	routes: [{
    		path: '/',
    		component: Home,
    		children: [{
    				path: '/a',
    				component: A
    			},
    			{
    				path: '/b',
    				component: B
    			}
    		]
    	}]
    })

[https_blog.csdn.net_qq_40323256_article_details_100999860]: https://blog.csdn.net/qq_40323256/article/details/100999860
[20190920235600800.gif]: https://img-blog.csdnimg.cn/20190920235600800.gif
[20190920235058538.png]: /images/20210725/9559209ce0ce40e9a4246c40e57e4608.png
[20190921001356435.gif]: https://img-blog.csdnimg.cn/20190921001356435.gif