vue-router剖析---简单的路由01（路由的params和query传值方式、命名路由的使用）

路由的安装省略（dos命令：npm install vue-router --save）

官网学习：点击打开链接

什么是前端路由

路由是根据不同的url地址展示不同的内容或页面
前端路由就是把不同的路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的

什么时候使用前端路由

在单页面应用，大部分结构不变，只改变内容的使用

前端路由优点、缺点

优点：
- 用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：
- 不利于SEO
- 使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存
- 单页面无法记住之前滚动的位置，无法再前进，后退的时候记住滚动的位置

vue-router其实就是对history的封装

地址后面跟#其实就是用了hash

一、使用路由的步骤：

1、创建组件引入组件

2、定义路由（建议复制）

const routes = [

{ path: '/home', component: Foo },

{ path: '/home1', component: Bar },

{ path: '*', redirect: '/home' } /*默认跳转路由*/

]

3、实例化VueRouter

扫描二维码关注公众号，回复： 3200438 查看本文章

const router = new VueRouter({

routes // （缩写）相当于 routes: routes

})

4、挂载（由于这里是通过vue-cli创建的项目，在创建的时候已经在入口文件main.js中已经挂在好无需在router/index.js中进行挂载）

new Vue({

el: '#app',

router，

render: h => h(App)

})

5 、根组件的模板里面放上这句话主要是用来渲染子路由的内容

<router-view></router-view>相当于是一个占位符

App.vue中必放

6、使用路由跳转

<router-link to="/home">Go to Foo</router-link>

<router-link to="/home1">Go to Bar</router-link>

router/index.js


import Vue from 'vue'
import Router from 'vue-router'
// 1.引入组件
import Home from '@/components/home'
import Home1 from '@/components/home1'

Vue.use(Router)

// 2.定义路由
let routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/home1',
    name: 'Home1',
    component: Home1
  }
]

//3.实例化路由
export default new Router({
  routes //(缩写)相当于routes:routes
})

main.js


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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 4.挂载路由
  router,
  components: { App },
  template: '<App/>'
})

<template>
    <div class="home">
        <!-- 5.使用路由方式一（html） -->
        <router-link to="/home1">{{home}}</router-link>
        <br>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return{
            home: '我是首页'
        }
    },
}
</script>

home1.vue


<template>
    <div class="home1" >
        {{home1}}
    </div>
</template>
<script>
export default {
    data() {
        return{
            home1: '我是首页的子路由home1',
            value: ''
        }
    },
}
</script>

< router-link > 默认会被渲染成一个 <a> 标签 to=""为我们定义的路由
< router-view > 路由匹配到的组件将渲染在这里

在new Router中指定mode为history即可去掉#，这样加载更加逼真符合预期

new Router({
    mode: "history",
    routes: []
})

简单的用法到此结束，下面开始剖析其他的用法

html进行路由传值：

js进行路由跳转及传值：

主要部分，其他与html的传值方式一样，只是换了一种用js的写法

命名路由：（与上面不同的是传递的参数值不会在url中显示）

若有不足请多多指教！希望给您带来帮助！