vue路由跳转了但界面不显示的问题及解决

目录
  • 路由跳转了但界面不显示
  • 路由明明配置好了页面还是不显示

路由跳转了但界面不显示

没有在父路由加上router-view，加上下面的代码即可。

<!-- 路由匹配到的组件将显示在这里 -->
<router-view></router-view>

路由明明配置好了页面还是不显示

在开发vue项目时，使用vue-router 路由老失效

问题代码

Vue.use(VueRouter)
var routeslist=[
  {
    path:'/',
    redirect:'/home'
  },    //配置路由，这里是个数组
  {                    //每一个链接都是一个对象
    path: '/home',         //链接路径
    name: 'home',     //路由名称，
    component: index   //对应的组件模板
  }
]
const router= new VueRouter({
   routeslist
})
new Vue({
  router:router,
  render: h => h(App),
}).$mount('#app')

解决

在使用路由时如何不满足命名规范，就必须加上参数名称

-注意~ 不只是这里 在

new Vue({
router,
render: h => h(App),})

如何VueRouter对象名称不为router时 也需要加上参数名称

router:router,
// 指定为routes
const router= new VueRouter({
    routes: routeslist
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue路由后界面没有变化,但是链接有的问题

    vue有个写法需要注意: 如果是跳转到默认首页,router-link 应该写: to: "{path: ' / ' } " 如果跳转到非默认首页的时候,router-link 应该写: to: "{path: ' about ' } " 就是除了跳转到默认首页的情况下,其他的都要去掉开始的斜杠 / ,是个坑,我踩了,祝你好运! 以上这篇解决vue路由后界面没有变化,但是链接有的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    在路由配置中,设置重定向后,浏览器打开是空白没有内容,这里首先确保你的结构没有写错,然后查看单词是否拼错误,一般情况是因为单词拼写错误. 修改后,跳转成功: 附录:VUE通过后端重定向到VUE的页面后,前端路由失效的解决方案 这个问题是我在做微信授权登录的时候遇到的. 具体描述: 用户打开页面后,路由拦截判断用户是否登录,如果未登录,则将用户的访问地址记录到localStorage里面,等待授权后重定向到该页面. 当我使用location.href将页面跳转到后端地址,进行微信用户信息获取完成,

  • 解决vue-router进行build无法正常显示路由页面的问题

    使用vue cli创建一个webpack工程 加入vue-router然后使用路由引入一个新的组件.这时路由和链接是这样写的 const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/first', component: firstCom } ] }) <a href="/first" rel="external nofollow" >Try

  • 解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面.不管你有没有写一个404页面,当出现未匹配路由都需重新指定页面跳转.可能大家首先想到会是路由重定向,redirect来解决这个问题.但实际上通过redirect是没办法更好解决这个问题的. 看代码红色部分 import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components

  • vue路由跳转了但界面不显示的问题及解决

    目录 路由跳转了但界面不显示 路由明明配置好了页面还是不显示 路由跳转了但界面不显示 没有在父路由加上router-view,加上下面的代码即可. <!-- 路由匹配到的组件将显示在这里 --> <router-view></router-view> 路由明明配置好了页面还是不显示 在开发vue项目时,使用vue-router 路由老失效 问题代码 Vue.use(VueRouter) var routeslist=[   {     path:'/',     red

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    目录 vue路由跳转打开新窗口和关闭窗口 编程式导航 window.open( )方法 关闭窗口 window.close() vue路由跳转打开新窗口(被浏览器拦截) 第一种方法 第二种方法 第二种方法(改良版) 总结 vue路由跳转打开新窗口和关闭窗口 需求:从当前页面跳转到其他页面时,打开一个新窗口 比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航 编程式导航 使用路由对象的resolve的方法解析路由,可以得到location.router.href等目标路由的信息,只

  • vue路由跳转传参数的方法

    vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link> 1. path -> 是要跳转的路由路径

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • vue路由跳转传递参数的方式总结

    日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail

  • vue路由跳转router-link清除历史记录的三种方式(总结)

    目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo

  • vue 路由跳转打开新窗口被浏览器拦截问题处理

    触发事件请求接口根据条件去判断在进行路由跳转:   <a @click="getGetMyPortfolioById(scope.row) ">查看</a>    getGetMyPortfolioById(vals) {      getMyPortfolioById({       }).then(response = >{          const routerdata = this.$router.resolve({             

  • Vue路由跳转的4种方式小结

    目录 1. 标签路由 router-link 2.编程式路由 this.$router.push() 3.this.$router.replace()(与this.$router.push()类似) 4.this.$router.go(n) 5.this.$router.push().this.$router.replace().this.$router.go(n)区别 router-view 实现路由内容的地方,引入组件时写到需要引入的地方,需要注意的是,使用vue-router控制路由则必须

  • Vue路由跳转方式区别汇总（push，replace，go）

    目录 声明式导航router-link 1. 不带参数 2.带参数 编程式导航 1.this.$router.push 2.this.$router.replace 3.this.$router.go(n) 总结区别: 在浏览器中,点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击 a标签链接.vue项目中点击router-link标签链接都属于声明式导航.在浏览器中,调用API方法实现导航的方式,叫做编程式导航.例如:普通网页中调用location.href跳转到新页面的方式,属于编

随机推荐