vue-router

1.安装vue-router

npm install vue-router --save

步骤二:在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
➢第一步:导入路由对象,并且调用Vue.use(VueRouter)
➢第二步:创建路由实例,并且传入路由映射配置
➢第三步:在Vue实例中挂载创建的路由实例

在router文件夹下新建inde.js

//配置路由相关的信心
import VueRouter from "vue-router";
import Vue from 'vue'

//1.通过Vue.use(插件)， 安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [

]

const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routes: routes
})

//3.将router对象传入的Vue实例中
export default router

在main.js中导入router

2.路由跳转案例

1.在Vue.vue中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-20BOa31m-1595940830395)(F:\Typora\img\image-20200707221636398.png)]

<router-link>:该标签是一个vue-router中已经内置的组件,默认它会被渲染成一个<a>标签.
          tag 属性可以吧router-link渲染成指定标签。例如想渲染成button标签
          repalce 属性：没有这个页面内的跳转也可以使用浏览器的<-按钮返回
          active-class属性：选中的标签在渲染完成后有会有class="router-link-active"
          	active-class="active" 可以使router-link-active变成active
          <router-link to="/home" tag="button" replace>首页</router-link>
<router-view>:该标签会根据当前的路径,动态渲染出不同的组件.
网页的其他内容,比如顶部的标题/导航,或者底部的一-些版权信息等会和<router-view>处于同一个等级.
在路由切换时,切换的是< router-view>挂载的组件,其他内容不会发生改变.

2.添加路由

/*
* 路由懒加载
* =打包（npm run build）之后，一个懒加载组件对应一个js文件
* */
const Home = () => import('../components/Home')
const About = () => import('../components/About')

const routes = [
  {
    /*路由的默认路径*/
    path: '/',
    //component: Home
    //redirect: 重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
  },
  {
    path: '/about',
    component: About,
  },

]

3.将hash模式修改为histoty模式

在创建VueRouter对象时添加mode属性

const router = new VueRouter({
  //配置路由组件之间的映射关系
  routes,
  mode: 'history' //默认情况下没有这，是hash模式   链接上会出现#
})

4.通过代码实现路由跳转

<button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button>
<router-view></router-view>

methods: {
     homeClick() {
       //通过代码的方式修改路由 vue-router
      //this.$router.push('/home')
      this.$router.replace('/home')
     },
     aboutClick() {
       //this.$router.push('/about')
       /*replace同上面的没有返回的干扰*/
       this.$router.replace('/about')
     }
 }

5.动态路由

————进入页面时的页面数不确定的情况

1.配置路由

const User = () => import('../components/User')

{
    path: '/user/:userId',
    component: User,
    meta: {
      title: '用户'
    }
  },

2.添加标签

<router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about">关于</router-link>
<router-link :to="'/user/'+userId">用户</router-link>
<router-link :to="/user/zhangsan">用户</router-link>

data() {
    return {
      userId: 'Rwenjie'
    }
  },

在跳转完成后获取的页面userId

<template>
    <div>
      <h2>我是用户界面</h2>
      <p>我是用户的相关信息，嘿嘿嘿</p>
      <h2>{{userId}}</h2>
    </div>
</template>

<script>
  //$router 可以调用一些方法（push.replace）进行路由的跳转 是router/index.js文件中创建的VueRouter对象
  //$route 是当前路由，那个路由处于活跃，获取的就是那个路由
    export default {
      name: "User",
      computed: {
        userId() {
            /*这里的userId是当时配置路由时起的名字*/
          return this.$route.params.userId
        }
      }
    }
</script>

<style scoped>

</style>

辨析router和route

$router 可以调用一些方法（push、replace）进行路由的跳转 是router/index.js文件中创建的VueRouter对象
$route 是当前路由，那个路由处于活跃，获取的就是那个路由

$router是我们创建的路由对象，当时创建的是后给与VueRouter传了许多参数，其中有一个routers参数，routers表示配置的路由数组，是多个路由。route就是其中的一个，route是当前最活跃的一个路由

这部分再丢一个链接https://www.bilibili.com/video/BV15741177Eh?p=113

6.认识路由的懒加载

你懒加载？我也懒，后面再看吧

放个链接https://www.bilibili.com/video/BV15741177Eh?p=108

P108 02(掌握)vue-router-打包文件解析

7.vue-router的嵌套使用

➢创建对应的子组件,并且在路由映射中配置对应的子路由.
➢在组件内部使用标签.

1. 创建对应的子组件HomeMessage.vue 和HomeNews.vue

2. 在路由的配置文件中导入子组件

   const HomeNews = () =>import('../components/HomeNews')
   const HomeMessage = () =>import('../components/HomeMessage')
   const Profile = () => import('../components/Profile')
   

3. 在Home的路由先配置子路由

     {
       path: '/home',
       component: Home,
       children: [
         // {
         //   path: '/',
         //   redirect: 'news'
         // },
         {
           path: 'news',
           component: HomeNews
         },
         {
           path: 'message',
           component: HomeMessage
         }
       ],
       //meta:元数据（描述数据的数据）
       meta: {
         title: '首页'
       }
     },
   

4. 在Home.vue中添加标签

   <template>
     <div>
       <h2>我是首页</h2>
       <p>我首页内容，哈哈哈哈</p>
       <hr>
       <router-link to="/home/news">新闻</router-link>
       <router-link to="/home/message">消息</router-link>
       <router-view></router-view>
     </div>
   </template>
   

8.参数传递

1)使用router-link跳转

第一种方式就是上面动态路由的方式

• params的类型:
  配置路由格式: /router/:id
  传递的方式:在path后面跟上对应的值
  传递后形成的路径: /router/123, /router/abc

第二种方式

• query的类型:
  配置路由格式: /router,也就是普通配置
  传递的方式:对象中使用query的key作为传递方式
  传递后形成的路径: /router?id= 123, /router?id=abc

1.创键profile.vue并添加路由

2.添加标签

<router-link :to="{path: '/profile', query:{name: 'Rwenjie', age: 23, height: 1.88}}">Profile</router-link>

3.在profile.vue中取出来

<template>
    <div>
      <h2>我是Profile</h2>
      <p>我是Profile组件的内容</p>
      <p>{{$route.query}}</p>
      <p>{{$route.query.name}}</p>
      <p>{{$route.query.age}}</p>
      <p>{{$route.query.height}}</p>
    </div>
</template>

2)使用button跳转

<button @click="userClick">用户</button>
<button @click="profileClick">档案</button>

userClick() {
  this.$router.push('/user/' + this.userId)
},
profileClick(){
  this.$router.push({
    path: '/profile',
    query: {
      age: 56,
      name: 'Rwenjie',
      height: 1.87
    }
  })

}

9导航守卫

​ 监听跳转的过程