美文网首页
配置vue-router

配置vue-router

作者: xiesen | 来源:发表于2019-07-12 15:08 被阅读0次

vue-router介绍

​ Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表;模块化的、基于组件的路由配置;路由参数、查询、通配符;基于 Vue.js 过渡系统的视图过渡效果;细粒度的导航控制;带有自动激活的 CSS class 的链接;HTML5 历史模式或 hash 模式,在 IE9 中自动降级;自定义的滚动条行为。

​ 由 前端 来控制页面的跳转(但其实是个单页面),根据不同的 url 地址展示不同的内容和页面。

​ 优点:体验好,不需要每次从服务器获取全部,快速展现给用户;

​ 缺点:不利于SEO;使用浏览器的前进,后退键的时候会重新发送请求,没有合理的利用缓存;单页面无法记住之前滚动的位置,无法在前进和后退的时候记住滚动的位置。

安装

npm install vue-router --save-dev 

新建router.js文件

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

Vue.use(VueRouter)

const routers = [
    {
        path: '/',
        meta:{
            title: '这是测试页面'
        },
        component: () => import('./components/test.vue')
    },
    {
        path: '/helloworld',
        meta:{
            title: '这是helloworld页面'
        },
        component: () => import('./components/HelloWorld.vue')
    }
]

var router = new VueRouter({
    routes: routers
})

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
      document.title = to.meta.title
    }
    next()
  })

router.push('/')

export default router

将router.js 文件引入main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

Vue.config.productionTip = false

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

在App.vue文件插入路由接口

App.vue

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

<script>
export default {
}
</script>

使用

 <router-link to='/path'> </router-link>
//跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
// 字符串
this.$router.push('index') 
// 对象
this.$router.push({path: 'login-pw'})
// 带参数
this.$router.push({ path: '/login', query: { msg: '参数' } })
// 跳转后的页面获取参数
this.msg = this.$route.query.msg
this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
//跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面
this.$router.replace("/")

相关文章

网友评论

      本文标题:配置vue-router

      本文链接:https://www.haomeiwen.com/subject/gcjekctx.html