zoukankan      html  css  js  c++  java
  • vue项目实现界面跳转

    为了使程序更加清晰,在src文件夹中建立router文件夹 ,在其中新建index.js,在此定义每个界面的路由。

    import Vue from 'vue'
    import Router from 'vue-router'
    import index from '../components/index.vue'
    import search from '../components/search.vue'
    import fenping from '../components/fenping.vue'
    
    
    Vue.use(Router);
    const originalPush = Router.prototype.push
    
    Router.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'index',
          component: index
        },
        {
          path: '/search',
          name: 'search',
          component: search
        },
        {
            path: '/fenping',
            name: 'fenping',
            component: fenping
          },       
      ]
    })

    找了好多,都是说用哪个history,但是我用到这个的时候总是不跳转。然后就是在main.js中进行了引用。

    import router from './router'    ./router就代表着我们之前定义的文件夹
    new Vue({
      // jquery,
      router,   //在这里进行应用
      render: h => h(App),
    }).$mount('#app')

    然后需要注意的是还需要在app.vue中进行修改,将这些标红的一句放入界面即可,他就可以根据路由将界面渲染出来。

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>

    另外就是跳转链接的设置

    这里有两种跳转方式

    1.直接使用push即在当前界面打开,进行渲染

        goTosearch() {
          this.$router.push("/search");
        },

    2.在新的窗口打开

      goToFenping() {
            //直接跳转
            let routeUrl = this.$router.resolve({
              path: "/fenping",
            });
            window.open(routeUrl.href, "_blank");
    
          },
  • 相关阅读:
    hdu 4396(spfs/二维最短路)
    hdu 4360(最短路变形)
    hdu 3501(欧拉函数的应用)
    bnu 4359(数位dp)
    用Hermite插值方法估计积分值
    虞旦盛老师 的《数学分析续》课件
    数值积分中的梯形法则
    数值积分中的梯形法则
    辛普森三八律
    利用自然数的标准分解证明可数集合的所有有限子集形成的集合是可数集
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15232544.html
Copyright © 2011-2022 走看看