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' }   /*默认跳转路由*/
  {
    path: '*',
    // redirect: "/404"  // 页面不存在重定向到 /404页面
    redirect: {name:'err404'} // 也可以通过命名路由的方式
  },
]

3、实例化VueRouter

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、使用路由跳转，默认会被渲染成a标签，要想渲染为指定的标签  添加tag属性

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

<router-link to="/home1" tag="li">Go to Bar</router-link> //  渲染为li标签

配置当前路由高亮：

export default new Router({
  linkActiveClass: 'active' // 类名
})

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">
        <loading v-if="loading"></loading>
        <!-- 5.使用路由方式一（html） -->
        <router-link to="/home1">{{home}}</router-link>
        <br>
        <router-view></router-view>
    </div>
</template>
<script>
import loading from "./views/globalLoading";
export default {
    components: {
        loading
    },
    data() {
        return{
            home: '我是首页',
            loading: false
        }
    },
    watch: {  //监听器
        $route(to, from) { // 监听路由变化，加载效果
          this.loading = true;
          setInterval(() => {
            this.loading = false;
          },500)
        }
    }
}
</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中显示）

使用命名路由的时候to 后面是一个object对象；params是一个路由的参数并不是一个页面之间跳转的参数

由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。但是可以使用path和query

 

 

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