vue 修改路由名字_Vue 路由设置title

1.在index.js中为需要添加title的路由地址增加meta

// 引入Vue

import Vue from 'vue'

// 引入router

import Router from 'vue-router'

// 引入组件

import Index from '@/components/Index'

import Found from '@/components/Found'

import DataStock from '@/components/DataStock'

import My from '@/components/My'

//注明使用router

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',//路由地址--根路径

component: Index,

meta: {

title: '首页'

}

{

path:'/index.html',

component:Index,

meta: {

title: '首页'

}

{

path:'/found.html',

component:Found,

meta: {

title: '发现'

}

{

path:'/dataStock.html',

component:DataStock,

meta: {

title: '资料库'

}

{

path:'/my.html',

component:My,

meta: {

title: '我的'

}

mode:'history'

})

2.在main.js中设置title

// 引入vue

import Vue from 'vue'

//引入模板

import App from './App'

//引入router

import router from './router'

//CSS

// import '../static/css/common.css'

Vue.config.productionTip = false

new Vue({

el: '#app',

router,

template: '',//模板

components: { App },//组件

})

router.beforeEach((to, from, next) => {

document.title = to.meta.title

next()

})

// index.html-->main.js-->App.vue(组件)

vue 修改路由名字_Vue 路由设置title相关推荐

vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
vue 判断权限过期_vue 路由权限
附上girhub 地址: loever/vue-FlexPaperViewergithub.com qq:3179689033 相互学习我把router.js 分成router.js 和route ...
vue 记录滚动位置_vue 路由跳转记住滚动位置，返回时回到上次滚动位置
方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive:t ...
vue暂存功能_vue路由缓存的几种实现方式小结
本文实例讲述了vue路由缓存的几种实现方式.分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的. 下面就简单介绍几种 ...
vue修改数据连接数据库_vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
vue 修改div宽度_Vue 组件通信方式及其应用场景总结（1.5W字）
前言相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...
vue修改http请求头_vue-resouce设置请求头的三种方法
本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下: 第一种:在Vue实例中设置 var vm = new Vue({ el:'#rrapp', data:{ showLi ...
vue改变class名字_vue中动态添加class类名的方法
vue 动态添加class类名,灵活得让你发狂,下面示例几个动态添加类名文字的颜色) 文字的颜色) 三元表示式(文字的颜色) 文字的颜色) 文字的颜色) 通过方法设置class类名 export ...
vue改变class名字_vue动态绑定class名
1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: 博客园首页简写: 博客园首页 2. 动态绑定class vue ...
vue 修改div宽度_vue 拖动调整左右两侧div的宽度
原文是左中右三种情况的拖动.由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度 1.拖动,调整左右两侧宽度西瓜备注2 西瓜备注2 export default { name: 'Da ...

vue 修改路由名字_Vue 路由设置title

vue 修改路由名字_Vue 路由设置title相关推荐

最新文章

热门文章