一、结合webpack使用vueRouter
1、创建App.vue组件
<template> <div> <h1>这是App组件模板页面</h1> </div> </template> <script> </script> <style> </style>
2、main.js中导入vue模块，并引入App组件
import Vue from 'vue'
import app from './App.vue'
3、创建vue实例，并使用render 函数将App组件挂载到index.html 中被vue实例控制得div上
index.html中：
<body> <div id="app"> </div> </body>
main.js中创建vue实例：
var vm = new Vue({
el:'#app',
render :function(createElements){
return createElements(app);
}
})
4、npm run dev运行项目可以成功显示APP组件的内容。
5、src目录下新建main文件夹，分别创建 GoodsList.vue 和 Account.vue.
GoodsList.vue:
<template> <div> <h1>这是Goodlists组件模板页面</h1> </div> </template> <script> </script> <style> </style>
Account.vue.:
<template> <div> <h1>这是Account组件模板页面</h1> </div> </template> <script> </script> <style> </style>
6、开始使用vue路由 vue-router。按照vue官网示范，结合webpack开始使用vue-router：
①：在终端中 npm i vue-router -s 导入vue-router
②: 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能 ：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
7、在main.js中引入 GoodsList.vue: 和 Account.vue.:。并创建路由对象控制这两个组件（注意：路由规则中是routes，不要错写成routers），并且将路由对象router挂在在vue实例中，最终完整main.js如下：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import app from './App.vue' import account from './main/Account.vue' import goodsList from './main/GoodsList.vue' var router = new VueRouter({ routes:[ {path:"/account",component:account}, {path:"/goodsList",component:goodsList} ] }) var vm = new Vue({ el:'#app', render :function(createElements){ return createElements(app); }, // component:[ // app // ], router })
8、最后在App.vue中写入路由链接入口
<template>
<div>
<h1>这是App组件模板页面</h1>
<router-link to="/account">Account</router-link>
<router-link to="/goodsList">GoodsList</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
9、npm run dev运行项目成功：
二、结合webpack实现子路由嵌套
1、在src目录下新建子组件文件夹subcom，分别创建 Login.vue 和 Register.vue.
Login.vue:
<template>
<div>
<h1>这是Account组件的 登陆子组件页面</h1>
</div>
</template>
<script>
</script>
<style>
</style>
Register.vue.:
<template>
<div>
<h1>这是Account组件的 注册子组件页面</h1>
</div>
</template>
<script>
</script>
<style>
</style>
2、在main.js中导入 登陆子组件和 注册子组件。并在 路由规则中加入子组件路由规则：
//导入登陆子组件和 注册子组件 import login from './subcom/Login.vue' import register from './subcom/Register.vue' var router = new VueRouter({ routes:[ { path:"/account", component:account, children:[ {path:'login',component:login}, {path:'register',component:register} ] }, {path:"/goodsList",component:goodsList} ] })
3、最后在Account.vue中写子组件路由链接入口
<template>
<div>
<h1>这是Account组件模板页面</h1>
<router-link to="/account/login">登陆></router-link>
<router-link to="/account/register">注册></router-link>
<router-view ></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
4、npm run dev运行项目成功：