vue之如何配置默认显示页面和默认路由

 更新时间:2023年06月29日 08:39:01   作者:咬紧牙关i  
这篇文章主要介绍了vue之如何配置默认显示页面和默认路由问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue配置默认显示页面和默认路由

在router文件夹中的index.js中配置

const routes = [
    {
        //没写就是任意路由都是定向这个
        path:'',
        //重定向
        redirect:'/xxx'
    }
]

vue中的路由以及默认路由跳转

参考网站:Vue Router 。

vue路由配置:

方法一

1、安装 

npm install vue-router  --save   / cnpm install vue-router  --save

2、引入并 Vue.use(VueRouter)   (main.js)

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3、创建组件

4、配置路由

5、实例化VueRouter 注意:名字

6、挂载

整个main.js

7、根组件的模板里面放上这句话   <router-view></router-view>  

8、路由跳转

方法二

1、在main.js中引用

 2、在router文件夹中的index.js中配置路由

 

 3、app.vue中添加路由占位符

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    这篇文章主要介绍了vue项目中调用百度地图API使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • uniapp使用条件编译#ifdef(跨平台设备兼容)

    uniapp使用条件编译#ifdef(跨平台设备兼容)

    这篇文章主要介绍了uniapp使用条件编译#ifdef(跨平台设备兼容),需要的朋友可以参考下
    2022-12-12
  • Vue组件为什么data必须是一个函数

    Vue组件为什么data必须是一个函数

    这篇文章主要介绍了Vue组件为什么data必须是一个函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vuejs2.0运用原生js实现简单的拖拽元素功能示例

    vuejs2.0运用原生js实现简单的拖拽元素功能示例

    本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • axios拦截器工作方式及原理源码解析

    axios拦截器工作方式及原理源码解析

    这篇文章主要为大家介绍了axios拦截器工作原理源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 详解一次Vue低版本安卓白屏问题的解决过程

    详解一次Vue低版本安卓白屏问题的解决过程

    这篇文章主要介绍了详解一次Vue低版本安卓白屏问题的解决过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue实现小球滑动交叉效果

    vue实现小球滑动交叉效果

    这篇文章主要为大家详细介绍了vue实现小球滑动交叉,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详解如何编写一个Vue3响应式系统

    详解如何编写一个Vue3响应式系统

    这篇文章主要为大家学习介绍了如何编写一个Vue3响应式系统,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-07-07
  • 解决vue终端报错:不是内部或外部命令

    解决vue终端报错:不是内部或外部命令

    最近学习一下前端框架Vue,整体上感觉还是比较有意思的,但是在安装vue-cli脚手架的时候,出现了一些问题,解决问题也花费了不少时间,下面这篇文章主要给大家介绍了关于解决vue终端报错:不是内部或外部命令的相关资料,需要的朋友可以参考下
    2023-02-02
  • 使用Vue实现防篡改的水印

    使用Vue实现防篡改的水印

    我们在平时上网的时候会看到有些图片是加水印的,一般水印往往是后端来做的,不过有些站点要保护的知识产权类型比较多,不光是图片,可能还有视频或者文字,所以我们水印的作用,就是给他做一个适当的限制,本文就给大家介绍一下如何使用Vue实现防篡改的水印
    2023-08-08

最新评论