看完Vue-Router直接入门

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。
此时，不同组件之间的切换需要通过前端路由来实现。

概念

通过不同地址（导航）渲染不同的内容
vue-router 是vue的核心插件之一

在vue中组件渲染的方式有两种：
一、通过组件的嵌套，实现组件的渲染
二、通过路由的切换，实现组件的渲染

安装

• 通过安装脚手架

在安装脚手的过程中，会出现一个选项，选项问你是否安装路由
install vue-router? y

通过脚手架安装成功之后，会自动配置路由相关目录

• 自行下载安装

npm install vue-router

不存在相关的路由配置文件，我们要自己创建

官网地址

https://router.vuejs.org/zh/

路由文件的基本配置

router=>router.js

//引入vue的核心库
import Vue from 'vue'
//引入路由的插件
import vueRouter from 'vue-router'

//通过use方法调用路由插件

Vue.use(vueRouter)

const router = new vueRouter()

//导出封装好的路由模块
export default router

main.js

//引入封装好的路由文件
import router from './router/router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

基本路由

router =>index.js

//引入vue的核心库
import Vue from 'vue'
//路由的插件
import Router from 'vue-router'
//通过use这个方法调用路由插件
Vue.use(Router)
//引入要渲染的组件
import Home from '@/components/home'
import Cart from '@/components/cart'
import Mine from '@/components/mine'

//导出实例化的路由配置对象
//routes 路线 复数
export default new Router({
  //创建N条路线，不同的路线我们可以渲染不同的组件
  routes: [
    {
      path:'/home',//路径地址，你通过什么地址可以访问什么组件,自定义的地址
      component:Home
    },
    {
      path:'/cart',
      component:Cart
    },
    {
      path:'/mine',
      component:Mine
    }
  ]
})

路由视图

<router-view></router-view>

路由导航

<router-link to='/home' >首页</router-link>
<router-link to='/cart' >购物车</router-link>
<router-link to='/mine'>个人中心</router-link>

路由的重定向

• 一级路由重定

{
	path:'*',
	redirect:'你要渲染的path地址'
}

• 二级路由重定向

{
	path:'',
	redirect:'你要渲染的path地址'
}

路由的嵌套

app.vue

<!--一级 路由出口 -->
  <router-view></router-view>

index.vue

<!-- 设置二级路由出口 -->
    <router-view></router-view>
    <!-- 设置路由导航 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/sort">分类</router-link>
    <router-link to="/cart">购物车</router-link>
    <router-link to="/mine">个人中心</router-link>

index.js

//引入vue的核心库
import Vue from 'vue'
//路由的插件
import Router from 'vue-router'
//通过use这个方法调用路由插件
Vue.use(Router)
//引入要渲染的组件
//引入一级路由组件
import Index from '@/pages/index'
import Detail from '@/pages/detail'
import sortList from '@/pages/sortList'
//引入二级路由组件
import Home  from  '@/views/home'
import Sort  from  '@/views/sort'
import Cart  from  '@/views/cart'
import Mine  from  '@/views/mine'

//导出实例化的路由配置对象
export default new Router({
  routes: [
    {
      path:'/index',
      component:Index,
      children:[ //二级路由的数组
        /* 
        提示：一般我们就到二级。。。实在组件路由特别特别多的时候，才有三级，基本就到二级结束
        二级路由path地址如果加上'/' 访问的地址：'/二级path'
        二级路由path地址如果没有加上'/' 访问的地址：'/一级path/二级path'
        */
        // {
        //   path:'home',
        //   component:Home
        // },
        // {
        //   path:'sort',
        //   component:Sort
        // },
        // {
        //   path:'cart',
        //   component:Cart
        // },
        // {
        //   path:'mine',
        //   component:Mine
        // },
        // {
        //   //二级路由重定向
        //   path:'',//二级路由重定向 path是空
        //   redirect:'/index/home'
        // }
        {
          path:'/home',
          component:Home
        },
        {
          path:'/sort',
          component:Sort
        },
        {
          path:'/cart',
          component:Cart
        },
        {
          path:'/mine',
          component:Mine
        },
        {
          //二级路由重定向
          path:'',//二级路由重定向 path是空
          redirect:'/home'
        }
      ]
    },
    {
      path:'/detail',
      component:Detail
    },
    {
      path:'/sortList',
      component:sortList
    },
    {
      path:'*',
      redirect:'/index'
    }
  ]
})

编程式导航

编程式导航，作者封装好的跳转方法，通过调用方法即可实现跳转
push() ： 往历史记录（history，浏览器的记录）中添加一条记录
replace()： 替换。在历史记录中替换当前这条记录
go(n): n是个整数 n -1， 代表回退上一页 0 当前，代表下一页 1
back(): 回退

动态路由传递参数(一般用的不多)

注意点： 无论是哪一种传递参数的方法： 动态路由都要去设定路由文件
router=>index.js

{
	path:'/地址/:变量'
}

编程式导航传递参数

视图
goDetail(携带的参数形参){
    //   this.$router.push('/detail/'+携带的参数形参)
    this.$router.push(`/detail/${携带的参数形参}`)
}

取值：
this.$route.params.变量

路由跳转携带参数

<!-- 通过路由导航进行跳转并携带参数 -->
<li class="goods" v-for="item in goodslist" :key="item.id">
    <router-link tag="div" :to="'/detail/' + item.id">商品名称：{{ item.name }}</router-link>
</li>

query传递参数

编程式导航传递参数

视图
goDetail(携带的参数形参){
    this.$router.push(`/detail?变量=${携带的参数形参}`)
    this.$router.push({
        path:'/你要跳转的地址',
        query:{
            变量: 携带的参数形参
        }
    })
}

取值：
this.$route.query.变量

路由跳转携带参数

<!-- 通过路由导航进行跳转并携带参数 -->
<li class="goods" v-for="item in goodslist" :key="item.id">
    <router-link tag="div" :to="'/detail?id=' + item.id"
                 >商品名称：{{ item.name }}</router-link
        >
</li>