美文网首页
Vue Router的使用（扫盲篇）

Vue Router的使用（扫盲篇）

作者: FTD止水 | 来源:发表于2019-03-31 22:42 被阅读0次

为什要使用Vue Router？

在传统的web网页里想要访问页面中不同的功能模块，通常需要变换url来切换不同的html，这样每次加载html都会消耗一定的时间，如果这种访问页面的方式用在webapp上，会非常影响体验。那能不能像原生app一样可以迅速切换不同功能页面呢？Vue Router就实现了SPA（单页面应用），根原生app一样可以迅速切换不同功能页面而不需要加载时间。

SPA缺点

1.不利于SEO，因为单页面的html文件只是一个空壳文件，它里面的所有内容都是通过ajax请求获得的，这样一来搜索引擎就无法抓取网页的关键内容。
解决办法：服务端渲染SSR
2.首屏渲染时间长
解决办法：预渲染（适用于静态站点，如：关于我们、联系方式）
也可以使用Nuxt.js来解决以上缺点，这里不做介绍，感兴趣的同学可以查阅相关文档。

Vue Router的实质

我们在使用vue编写页面的时候通常都会用到组件，通常我们会把定义好的组件用定义标签的方式引入到页面中，但是这种引入方式不够灵活，Vue Router的作用就是能让我们动态的引入我们需要的组件。

如何使用Vue Router

1.npm安装路由（前提是已经掌握了npm包管理工具）

cnpm install vue-router --save      //建议用cnpm镜像来安装

2.在项目src文件夹中创建router文件夹，在router文件夹中创建router.js文件


目录.png

3.在router.js中配置路由
配置路由之前要先创建路由所要引入的动态组件


组件.png

router.js中代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'


/*配置路由*/
const routes=[
    {path:"/demo1",component:demo1},
    {path:"/demo2",component:demo2}
    
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

main.js中代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
new Vue({
  el: '#app',
  router,      //挂在路由
  render: h => h(App)
})

根组件App.vue代码如下：

<template>
  <div id="app">
        <router-link to="/demo1">demo1</router-link>
        <router-link to="/demo2">demo2</router-link>
        <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{

  }

}
</script>

router-link为路由跳转标签，属性to是路由跳转的url，每个url都对应不同的切换组件。
router-view标签为路由插入组件的位置

动态路由和get路由传值

demo1.vue作为动态路由的使用示例，demo2.vue作为get路由传值的示例，修改router.js代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'


/*配置路由*/
const routes=[
    {path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
    {path:"/demo2",component:demo2}
    
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

修改App.vue代码如下：

<template>
  <div id="app">
        <router-link to="/demo1/9527">demo1</router-link>
        <router-link to="/demo2?id=1357">demo2</router-link>
        <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
  }
}
</script>

demo1.vue代码如下：

<template>
    <div>
        demo1的内容
        <div>props传值为{{id}}</div>
    </div>
    
</template>

<script>
    export default {
        props:['id'],//接收动态路由的值
        data(){
            return{
                
            }
        },
        mounted(){
            console.log(this.$route.params.id)      //页面控制台输出结果是9527
        }
    }
</script>

demo2.vue代码如下：

<template>
    <div>demo2的内容</div>
</template>

<script>
    export default {
        data(){
            return {
                
            }
        },
        mounted(){
            console.log(this.$route.query.id)       //页面控制台输出结果是1357
        }
    }
</script>

如何用js跳转路由？

在components文件夹中创建demo3.js,代码入下：

<template>
    <div>编程式导航页面</div>
</template>

<script>
    export default {
        data(){
            return {
                
            }
        },
        mounted(){
            console.log(this.$route.params.id)
            //console.log(this.$route.query.aid)
        }
    }
</script>

router.js代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'
import demo3 from '../components/demo3'


/*配置路由*/
const routes=[
    {path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
    {path:"/demo2",component:demo2},
    //{path:"/demo3",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
    {path:"/demo3/:id",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

App.vue代码如下：

<template>
  <div id="app">
    <button @click="goDemo3">去demo3</button>
        <router-link to="/demo1/9527">demo1</router-link>
        <router-link to="/demo2?id=1357">demo2</router-link>
        <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    goDemo3(){
            this.$router.push({name:"test",params:{id:1234}})           //注意这里一定要使用别名，否则无法用动态路由传值
            //this.$router.push({path:"/demo3",query:{aid:1234}})       //使用路径切换
            //this.$router.push({name:"test",query:{aid:1234}})     //推荐使用路由别名切换导航，因为某些url路径比较长，不方便阅读
    }

  }

}
</script>

运行后点击页面按钮，路由自动跳转为demo3

如何嵌套路由？

在components文件夹下创建如下文件：


目录结构.png

App.vue代码如下：

<template>
  <div id="app">
    <button @click="goDemo3">去demo3</button>
        <router-link to="/demo1/9527">demo1</router-link>
        <router-link to="/demo2?id=1357">demo2</router-link>
        <router-link to="/demo4">demo4</router-link>
        <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    goDemo3(){
            this.$router.push({name:"test",params:{id:1234}})           //注意这里一定要使用别名，否则无法用动态路由传值
            //this.$router.push({path:"/demo3",query:{aid:1234}})       //使用路径切换
            //this.$router.push({name:"test",query:{aid:1234}})     //推荐使用路由别名切换导航，因为某些url路径比较长，不方便阅读
    }

  }

}
</script>

router.js代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'
import demo3 from '../components/demo3'
import demo4 from '../components/demo4'
import demo4a from '../components/demo4/demo4-1'
/*配置路由*/
const routes=[
    {path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
    {path:"/demo2",component:demo2},
    //{path:"/demo3",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
    {path:"/demo3/:id",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
    {path:"/demo4",component:demo4,children:[
        {path:"demo4-1",component:demo4a}
    ]},//name属性是给路由起别名，方便用js的方式去跳转
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

demo4.vue代码如下：

<template>
    <div>
        <router-link to="/demo4/demo4-1">去子路由demo4-1</router-link>
        <router-view></router-view>
    </div>
</template>

demo4-1.vue代码如下

<template>
    <div>demo4-1子路由</div>
</template>

运行代码，嵌套路由效果如下：


运行结果.png

路由hash模式 VS history模式

路由的默认模式是hash模式（如上个运行结果图的url多出了一个“#），这种模式无法在页面中使用锚点定位，所以项目中要尽量使用history模式，router.js修改如下配置：

/*实例化路由*/
const router = new VueRouter({
  mode:"history",   //模式修改  
  routes // （简写）相当于 routes: routes
})

以上便是vue-router在项目中最常用的方法和方式，如有错误，恳请指正。

止水
于沈阳
2019/03/31 22：42

相关文章

网友评论

      本文标题：Vue Router的使用（扫盲篇）

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Vue Router的使用（扫盲篇）|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！