vue设置默认首页的操作

在router.js设置如下：

index就是默认页面

const routes = [
// 公司项目
{ path: '/', redirect: '/index' },
{path:'/index',component:index},
{
path:'/example',
component:example,
redirect:'/edetail',
children:[
{path:'/edetail',component:edetail}
]
},
{path:'/login',component:login}
]

不使用在根目录设置router的方法，跳转页面带不同的头部信息时容易出现问题

补充知识：vue-router默认的首页渲染设置

当一个vue项目的页面打开，总得有一个默认的首页组件自动出现

不能只是点击首页的跳转才出现

这个默认的打开路由配置需要在router.js中的 VueRouter 实例中，改变routes数组

const router = new VueRouter({
 routes:[
 {
 path:'/',
 //redirect 是重新定向
 redirect:'/home'
 },
 {
 path:'/home',
 component:Home
 }
]
})

这样设置之后，就将默认的路由路径设置为/home

以上这篇vue设置默认首页的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue单页面应用中动态修改title问题

    详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认icon图片 已测试:APP 微信 QQ 支付宝 淘宝 安装 npm install vue-wechat-title --save 用法 1.在main.js中引入 impor

  • 在vue中实现给每个页面顶部设置title

    实现思路很简单:就是利用路由的导购守卫beforeEach在每次页面跳转前更改对应的title 1.首先在route里面给每个路由加上meta属性 2.在main.js里面加上导航守卫 router.beforeEach((to,form,next) => { window.document.title = to.meta.title == undefined?'默认标题':to.meta.title next() }) 补充知识:vue element tab标签页文本溢出时,鼠标上去 Too

  • vue项目初始化到登录login页面的示例

    如下所示: export default new Router({ routes: [ { path: '/', redirect:'/login', }, { path: '/login', alias:'/accounts/login', name: '登录', component: () => import('@/views/accounts/login') } ] `` 嗯 就这样写就可以啦 我向来都是简单粗暴~~ 以上这篇vue项目初始化到登录login页面的示例就是小编分享给大家的全

  • vue设置一开始进入的页面教程

    vue项目默认进入的页面是 HelloWorld.vue 现在我们创建一个页面Login.vue <template> <div> 登录界面 </div> </template> <script type="text/ecmascript-6"> export default { data() { return {} } } </script> 在router目录下的index.js文件中我们设置一开始进入的页面

  • vue设置默认首页的操作

    在router.js设置如下: index就是默认页面 const routes = [ // 公司项目 { path: '/', redirect: '/index' }, {path:'/index',component:index}, { path:'/example', component:example, redirect:'/edetail', children:[ {path:'/edetail',component:edetail} ] }, {path:'/login',com

  • Vue设置长时间未操作登录自动到期返回登录页

    Vue设置长时间未操作登录以后自动到期返回登录页 首先我们写在main.js文件中 import routerUtil from "@/utils/routerutil";//先将js文件在main.js中引入 routerUtil(router); 我们会在登陆成功后调用sessionUtil文件中的setSession,sessionUtil下面写的有 import sessionUtil from '@/utils/sessionutil' sessionUtil.setSess

  • Apache中如何设置默认首页具体该怎么操作

    在你安装后的Apache目录下,有一个conf目录,在这个目录里,有一个"httpd.conf"文件.我们要做的,就是修改这个文件. 在这个文件里,凡是以"#"开头的每一行,都是无效的,如果你想让你的设置起作用,就要把行首的"#"去掉. 找到 DirectoryIndex 这段.把它改成DirectoryIndex index.php index.Html index.html 这样,你的网站目录的默认首页是 index.php, 如果没有ind

  • @RequestParam使用defaultValue属性设置默认值的操作

    @RequestParam使用defaultValue属性设置默认值的操作

    @RequestParam使用defaultValue属性设置默认值 注意设置必须是string类型的,框架自己会做转换 @RequestParam(value = "page", required = false, defaultValue = "1") Integer page, @RequestParam(value = "size", required = false) Integer size, 补充:@RequestParam注解的使

  • Spring Boot 2.0 设置网站默认首页的实现代码

    Spring Boot设置默认首页,方法实验OK如下 附上Application启动代码 /** * @ClassName Application * @Description Spring-Boot website启动类 * @author kevin.tian * @Date 2018-03 * @version 1.0.0 */ @SpringBootApplication @PropertySource(value={ "file:${APP_HOME_CONF}/overpayment

  • Vue props中Object和Array设置默认值操作

    我就废话不多说,看代码吧~ seller: { type: Object, default() { return {} } } seller: { type: Object, default: function () { return {} } } 当父组件没有传这个值或者值是空时,输出的话,返回: 下面这种是错误的 seller: { type: Object, default: () => {} } 当父组件没有传这个值或者值是空时,输出的话,这时是返回underfind,在template

  • Vue 设置axios请求格式为form-data的操作步骤

    Cover 在Vue中使用axios 这个老生常谈了,还是先记录一遍,方面后面自己查. !!! 设置form-data请求格式直接翻到后面看. 1. 安装axios 在项目下执行npm install axios. 之后在main.js中,添加: import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios封装了get方法,传入请求

  • Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    1.前阶段做了这个地址管理页面,实现的过程中遇到了很多的问题,好在最后实现了,在此记录一下: 首先是加载页面阶段ajax从数据库中获取数据,然后动态的显示在页面中,随后可以点击单个的编辑或删除进行相关操作,可以单击默认地址按钮进行样式切换,默认地址可以没有(单击选中和取消),但是如果设置默认地址则只能设置一个,好,下面我们来一步一步的实现. 2.我这里使用的是Vue.js,页面加载阶段很简单,直接在mounted声明一个方法,然后在方法中调用ajax请求访问数据然后通过v-for循环将数据放入到

  • 基于vue.js仿淘宝收货地址并设置默认地址的案例分析

    基于vue.js仿淘宝收货地址并设置默认地址的案例分析

    这个案例主要是渲染地址列表,然后设置默认地址,与淘宝的收货地址功能一样,具体自行查看自己的淘宝收货地址: 效果图: html结构 <!--the-address--> <div class="the-address"> <div class="adr-tent" id="vue-address"> <table class="adr-table"> <thead class

  • IIS6、IIS7.5设置网站默认首页方法(Directory Listing Denied)

    IIS6、IIS7.5设置网站默认首页方法(Directory Listing Denied)

    今天有个客户问我他的网址访问目录就打开网站出现Directory Listing Denied,其实就是没有设置默认页面的问题,一般情况下默认网页的名称都是index.html,index.htm,default.htm,default.html.index.php.default.php等等,一般不是index就是default,不是html就是htm,其实这个默认页面名称可以随意设置,123.htm都是可以的,只要你设置一下就可以了. 1.目录中如果没有默认页面的或者iis中设置的默认页面不

随机推荐