您好,登錄后才能下訂單哦!
windows下vue-cli及webpack 構(gòu)建網(wǎng)站(一)環(huán)境安裝
windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
1、本篇文章是建立在以上三篇文章的基礎(chǔ)上的。
2、安裝 vue-router 插件,運(yùn)行cmd進(jìn)入到項(xiàng)目目錄下面,運(yùn)行以下命令:
cnpm install vue-router --save-dev
3、在src文件夾下面新建一個(gè)文件夾page用于存放模板文件,然后分別在這個(gè)文件夾下面新建 index.vue、list.vue兩個(gè)文件,然后打開index.vue粘貼以下代碼:
<template> <div class="jumbotron"> <h2>這里是首頁!</h2> </div> </template>
保存之后再打開list.vue粘貼以下代碼:
<template> <div class="list-group"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item active"> 這里是列表頁 </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Morbi leo risus</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Porta ac consectetur ac</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Vestibulum at eros</a> </div> </template>
好了,兩個(gè)頁面的內(nèi)容都準(zhǔn)備好了,接下來我們修改入口文件app.vue的內(nèi)容吧
4、打開src文件夾下面的app.vue文件,修改代碼為
<template> <div> <HtmlHeader></HtmlHeader> <router-view class="view" keep-alive transition transition-mode="out-in"> </router-view> <HtmlFooter></HtmlFooter><span > </span> </div> <span > </span> </template> <script> import HtmlHeader from './components/header' import HtmlFooter from './components/footer' export default { components: { HtmlHeader, HtmlFooter } } </script>
這里用了 router-view 來把剛才新建的兩個(gè)頁面加載到這里來
修改了入口文件接下來就是要進(jìn)行路由規(guī)則的配置了。
5、在src文件夾下面新建一個(gè)文件夾config用來存放路由配置,在config文件夾下面新建routes.js文件并打開,然后粘貼以下代碼并保存:
//加載模板文件 import index from '../page/index' import list from '../page/list' //路由規(guī)則設(shè)置 export default [ { path: '/', component: index }, { path: '/list', component: list } ]
現(xiàn)在路由配置文件也已經(jīng)配置好了,我們接下來就是要打開sec文件夾下面的main.js文件設(shè)置路由使用了
6、打開main.js 文件,在頭部加入以下代碼
// 引用路由插件 import VueRouter from 'vue-router' // 試用路由插件 Vue.use(VueRouter) //引入路由配置文件 import routes from './config/routes' // 使用配置文件規(guī)則 const router = new VueRouter({ mode: 'history', base: __dirname, routes: routes })
這個(gè)是引入路由插件并且使用,然后加載路由規(guī)則
接著把
new Vue({ el: '#app', template: '<App/>', components: { App } })
修改為
const app = new Vue({ router: router, render: h => h(App) }).$mount('#app')
設(shè)置完之后整個(gè)頁面代碼如圖
7、加載開始運(yùn)行 npm run dev 查看效果吧,打開http://localhost:8080 和http://localhost:8080/list 就可以看到不同的效果了
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。