Other-Vue_router路由跳转

[TOC]

整体框架结构

Vue router 实现界面导航切换。.。

由router/index.js 中的vue-router来指引不同的要跳转的界面
在main.js中添加路由跳转的函数，
在app.vue中利用router-view来规范router切换的范围
在需要跳转的位置利用main.js中的路由跳转函数来进行跳转

核心代码

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      redirect: {
        name: 'home'
      }
    },
    {
      path: '/home',
      name: 'home',
      component: require('../components/AddPicture.vue').default
    },
    {
      path: '/page01',
      name: 'page01',
      component: require('../components/Mainpage.vue').default
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App.vue'
import { DatePicker } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { Button, Layout, Menu, Row, Col, Card, Form, Input, Select, InputNumber, Table,List } from 'ant-design-vue';
import router from './router'
import VueRouter from 'vue-router'

// 点击相同路由之后报错的解决方案
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}


// 路由跳转
Vue.prototype.$goRoute = function (index) {
  this.$router.push(index)
}
Vue.use(Button);
Vue.use(Layout);
Vue.use(Menu);
Vue.use(Row);
Vue.use(Col);
Vue.use(Card);
Vue.use(Form);
Vue.use(Input);
Vue.use(Select);
Vue.use(InputNumber);
Vue.use(Table);
Vue.use(List);

Vue.use(DatePicker);
Vue.use(VueRouter)

Vue.config.productionTip = false

new Vue({
  el:'#app',
  router,
  render: h => h(App),
})

App.vue

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

<script>
export default {
    name: 'App',
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #3c84cc;
    margin-top: 60px;
}
</style>

调用路由部分

<a-button type="dashed" shape="round" size="large" @click="$goRoute('/page01')">导入图片</a-button>

踩过的坑

浏览器console里一串红，真是一个一个报错挨个Google ，(没错看不懂官方文档的菜鸡的自我救赎)

在没有文件夹名和文件名冲突的前提下报错解决方案：add .default to require(‘xxx.vue’) or import(‘xxx.vue’) it will work right

Unknown custom element:- did you register the component correctly 解决方案：记得引入vue-router并且Vue.use即可。

vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated”… 的解决方法：解决方案：当时指点迷津的博客

import Router from 'vue-router'
Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

[vue-router] Duplicate named routes definition: { name: “home”, path: “/home” } 解决方案：

{
      path: '/',
      redirect: {
        name: 'home'
      }
    },
    {
      path: '/home',
      name: 'home',
      component: home
    },

还有我最后跳转成功之后碰到了一点逻辑错误，在app.vue中放置了router-view，并且写了某个界面的code，然后出现了id为app的div重复出现了两次，，，一模一样(人都傻了)后来更改了一下逻辑，因为在原来的逻辑中router路由设置的默认界面的指向就是app.vue，并且app.vue中本身就有界面渲染，然后就渲染重了。解决方案：把默认指向的界面单出来再写一个，然后app.vue中只放一个router-view即可。

Posted on Feb 16, 2020