详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

cnpm install vue-router --save-dev 

<template>   <div class="jumbotron">     <h1>这里是首页！</h1>  </div>  </template> 

<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> 

<template>  <div>  <HtmlHeader></HtmlHeader>    <router-view     class="view"     keep-alive     transition     transition-mode="out-in">    </router-view> <HtmlFooter></HtmlFooter><span style="white-space:pre"> </span>    </div> <span style="white-space:pre"> </span> </template>   <script> import HtmlHeader from './components/header' import HtmlFooter from './components/footer' export default {  components: {   HtmlHeader,   HtmlFooter  } } </script> 

//加载模板文件 import index from '../page/index' import list from '../page/list' //路由规则设置 export default [   {     path: '/',     component: index   },   {     path: '/list',     component: list   } ] 

// 引用路由插件 import VueRouter from 'vue-router' // 试用路由插件 Vue.use(VueRouter) //引入路由配置文件 import routes from './config/routes' // 使用配置文件规则 const router = new VueRouter({  mode: 'history',  base: __dirname,  routes: routes }) 

new Vue({  el: '#app',  template: '<App/>',  components: { App } }) 

const app = new Vue({    router: router,    render: h => h(App) }).$mount('#app')