17、vue.js 之路由里的返回、前进、跳转

用node加webpack开发

1、返回和前进

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

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

说明：在需要的位置加上红色框内的代码即可

2、跳转

1）方式1：通过网址跳转

注意：这是页面内操作（等于a标签的锚点），如果写比如百度的网址不能跳到百度的网页

2）方式2：通过name跳转

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>      <li><router-link to="/hello">hello</router-link>      <li><router-link to="/chong">chong</router-link>      <li><router-link to="/qing">qing</router-link>    </ul>    <router-view></router-view>  </div>`}const index = {// 首页模板  template: `<div>这里是index</div>`}const about = {// about页模板  template: `<div>这里是about    <router-view></router-view>  </div>`}const router = new Router({// 跟路由显示的地方是第一个 router-view 标签里  // 必须放在后面 因为前面声明模板用的是const ES6的语法，必须先声明后调用  routes: [// 在routes里面的称之为跟路由    {path: '/', component: index},    {path: '/about', name: 'about', component: about},    // 通过网址跳转    {path: '/hello', redirect: '/'},    // 通过绑name跳转    {path: '/chong', redirect: {name: 'about'}},    // 根据自定义函数跳转(里面自带传入了几个参数，可以打印arguments查看)    {path: '/qing',      redirect: () => {        // 也可以返回name 也可以判断一些参数来控制器跳转到哪里，比例传递过来的值 都保存在argums里面，常用的由hash params query        return '/'      }}  ]})// 使用路由插件Vue.use(Router)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  render: h => h(App)// 传递一个参数: 让页面默认显示的模板 return})

说明：