15、vue.js 之路由与子路由

用node加webpack开发

1、版本1

项目文件下src下的main.js文件里面的代码如下，其他地方不动

// 这里是主文件import Vue from 'vue' // 引入vueimport Router from 'vue-router' // 引入路由插件 路径 没有 ./ /  直接写名字是找的node_modules目录下的文件const App = {// 默认模板  template: `<div id="app">    默认显示的内容    <router-view></router-view>  </div>`}const index = {// 首页模板  template: `<div>这里是index</div>`}const about = {// about页模板  template: `<div>这里是about</div>`}// 必须放在后面 因为前面声明模板用的是const ES6的语法，必须先声明后调用const router = new Router({// 跟路由显示的地方是第一个 router-view 标签里  routes: [// 在routes里面的称之为跟路由    {path: '/', component: index},    {path: '/about', component: about}  ]})// 使用路由插件Vue.use(Router)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  render: h => h(App)// 传递一个参数: 让页面默认显示的模板 return})

在cmd界面，在项目文件下输入npm run dev 运行环境

运行结果：手动输入网址

2、版本2

项目文件下src下的main.js文件里面的代码如下，其他地方不动

// 这里是主文件import Vue from 'vue' // 引入vueimport Router from 'vue-router' // 引入路由插件 路径 没有 ./ /  直接写名字是找的node_modules目录下的文件const App = {// 默认模板  template: `<div id="app">    默认显示的内容    <ul>      <li><router-link to="/">index</router-link></li>      <li><router-link to="/about">about</router-link></li>    </ul>    <router-view></router-view>  </div>`}const index = {// 首页模板  template: `<div>这里是index</div>`}const about = {// about页模板  template: `<div>这里是about</div>`}// 必须放在后面 因为前面声明模板用的是const ES6的语法，必须先声明后调用const router = new Router({// 跟路由显示的地方是第一个 router-view 标签里  routes: [// 在routes里面的称之为跟路由    {path: '/', component: index},    {path: '/about', component: about}  ]})// 使用路由插件Vue.use(Router)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  render: h => h(App)// 传递一个参数: 让页面默认显示的模板 return})

运行效果：点击切换

说明：通过<li><router-link to="/">index</router-link></li> 实现点击自动切换 通过<router-link to="/">绑定切换的地址 实际上最后会自动生成a标签

3、版本3 加入子路由

项目文件下src下的main.js文件里面的代码如下，其他地方不动

// 这里是主文件import Vue from 'vue' // 引入vueimport Router from 'vue-router' // 引入路由插件 路径 没有 ./ /  直接写名字是找的node_modules目录下的文件const App = {// 默认模板  template: `<div id="app">    默认显示的内容    <ul>      <li><router-link to="/">index</router-link></li>      <li><router-link to="/about">about</router-link></li>    </ul>    <router-view></router-view>  </div>`}const index = {// 首页模板  template: `<div>这里是index</div>`}const about = {// about页模板  template: `<div>这里是about  <ul>      <li><router-link to="/about/aa">aa</router-link></li>    </ul>  <router-view></router-view>  </div>`}const aa = {// aa页模板  template: `<div>这里是aa</div>`}// 必须放在后面 因为前面声明模板用的是const ES6的语法，必须先声明后调用const router = new Router({// 跟路由显示的地方是第一个 router-view 标签里  routes: [// 在routes里面的称之为跟路由    {path: '/', component: index},    {path: '/about',      component: about,      children: [      // 子路不可以写 /      {path: 'aa', component: aa}      ]}  ]})// 使用路由插件Vue.use(Router)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  render: h => h(App)// 传递一个参数: 让页面默认显示的模板 return})

运行结果：

说明：