API

官方vue-router

安装vue-router

在项目文件夹目录下安装router

  1. npm install vue-router --save
  3. #安装指定版本
  4. npm i vue-router@3.2.0

配置vue-router

通过脚手架安装的，一般在src目录下新建一个文件夹，里面新建一个index.js文件

vue-router3.x的配置

  1. //配置路由相关的信息
  2. import VueRouter from 'vue-router'
  3. import Vue from 'vue'
  6. //1.通过 Vue.use(插件) ，安装插件 
  7. Vue.use(VueRouter);//vue2.x版本的路由注册
  9. //现在这个路由的数字是空的
  10. const routes=[];//！！！！！！这个名字绝对不能取错！！！！！！！！！！！！！
  11. //2.创建路由对象
  12. //和new Vue()是一样的，VueRouter一样要传一个对象进去
  13. const router = new VueRouter({
  14.     //routers是配置路径和组件之间的映射关系
  15.     routes,
  16.       mode:"history" //模式
  17. });
  19. //3.将router对象传入到Vue实例中
  20. //这时候就要导出router对象
  21. export default router;

vue-router4.x的配置

和上面差不多，如下不同

  1. import {createRouter,createWebHistory} from 'vue-router'
  3. //不使用new VueRouter了
  4. const history =createWebHistory();
  5. const router = createRouter({
  6.     routes,   //这里面的名字千万不能打错了
  7.     history
  8. });
  10. //在vue3.x版本，这么注册路由，如果上面的router在不同的文件，导出到这个文件使用
  11. createApp(App).use(router).mount('#app')

然后在root组件的选项里面加入上面导出的router对象

  1. <script>
  2. import HelloWorld from './components/HelloWorld.vue'
  3. import router from './router/index.js'
  5. export default {
  6.   name: 'App',
  7.   components: {
  8.     HelloWorld
  9.   },
  10.   router  //语法简写加入router对象
  11. }
  12. </script>

使用vue-router

创建好路由组件，一个页面，url路径改变，其实还是在这个页面的，只是不同的url路由，使用不同的组件。这时候就需要把这些需要的组件全部创建好

.vue文件

组件创建都是.vue文件，模板写在template里面，组件的其他就写在script标签里面

  1. <template>
  2.  <h2>这是关于页面</h2>
  3. </template>
  5. <script>
  6. export default {
  8. }
  9. </script>
  11. <!-- Add "scoped" attribute to limit CSS to this component only -->
  12. <style scoped>
  14. </style>

映射路由

然后在上面配置路由的.js文件里面导入刚才创建的组件，然后把路径和组件一一映射

  1. import cpnHome from '../components/home.vue'
  2. import cpnAbout from '../components/about.vue'
  4. const Default ={
  5.     path:'',
  6.     redirect:"/home",//重定向，路径为空，默认显示主页
  7.     component:cpnHome
  8. };
  9. const Home ={
  10.     path:'/home',
  11.     component:cpnHome
  12. };
  13. const About ={
  14.     path:'/about',
  15.     component:cpnAbout
  16. };
  18. const routes=[
  19.     Home,
  20.     About,
  21.       Default
  22. ];

标签跳转路由

在使用这个路由的组件模板中创建路由标签
router-link最终会被渲染成a标签
router-link的属性 更多router-link的api

to：用来跳转路由的 tag：默认是渲染成a标签，用tag可以指定渲染（vue-router4.x版本失效） replace：加入这个属性，用户就不能点击浏览器自带到的前进后退按钮了 active-class：设置点击激活的类名，不设置有磨人的 点击记过类名

  1. <div id="app">
  2.   //路由方式
  3.   <router-link to="/home" tag='button' replace active-class='a'>首页</router-link>
  4.   <router-link to="/about" replace>关于</router-link>
  6.   //路由到的组件放在这里面
  7.   <router-view></router-view>
  8. </div>

代码跳转路由

  1.   <button @click="click_home">首页</button>
  2.   <button @click="click_about">关于</button>
  1. <script>
  2. import router from './router/index.js'
  4. export default {
  5.   name: 'App',
  6.   components: {
  7.   },
  8.   router,
  9.   methods:{
  10.     click_home(){
  11.       //this指向当前组件，$router是vue-router加的
  12.       //push方法用户可以点击浏览器的返回前进按钮，replace方法不能点击浏览器的前进返回
  13.       //this.$router.push('/home');
  14.       this.$router.replace('/home');
  15.     },
  16.     click_about(){
  17.       //this.$router.push('/about');
  18.       this.$router.replace('/about');
  19.     }
  20.   }
  21. }
  22. </script>

动态路由/传递参数

params方式

在映射路由里面后面加上/:变量名变量名随便写

  1. const User ={
  2.     path:'/user/:user_id',
  3.     component:cpnUser
  4. };

跳转的路由后面拼接动态的数据

  1. click_user(){
  2.   this.$router.replace('/user/10001');
  3. }

获取参数

子组件要获取父组件路由跳转过来的参数
$route.params.参数名

  1. <template>
  2.  <h2>这是用户页面</h2>
  3.  <p>我的名字是：{{name}}</p>
  4.  <p>我的用户id是：{{getID}}</p>
  5. </template>
  7. <script>
  8. export default {
  9.     data(){
  10.         return{
  11.             name:"张三"
  12.         }
  13.     },
  14.     computed:{
  15.         getID(){
  16.            //通过这个$route.params.参数名 获取父组件路由过来的参数
  17.             return this.$route.params.user_id;
  18.         }
  19.     }
  20. }
  21. </script>

query方式

  1. <template>
  2. <div id="app">
  3.   <button @click="click_user">用户</button>
  4.   <router-view></router-view>
  5. </div>
  6. </template>
  8. <script>
  9. import router from './router/index.js'
  11. export default {
  12.   name: 'App',
  13.   components: {
  14.   },
  15.   data(){
  16.     return{
  17.       //主要就是路由和参数写成一个对象，query就是参数对象
  18.       datas:{
  19.         path:'/user',
  20.         query:{
  21.           name:"张总",
  22.           age:32
  23.         }
  24.       }
  25.     }
  26.   },
  27.   router,
  28.   methods:{
  29.     click_user(){
  30.       //由代码跳转，参入路由和参数对象
  31.       this.$router.replace(this.datas);
  32.     }
  33.   }
  34. }
  35. </script>

获取参数

  1. <template>
  2.  <h2>这是用户页面</h2>
  3.  <p>我的名字是：{{$route.query.name}}</p>
  4.  <p>我的年龄是：{{$route.query.age}}</p>
  5. </template>

路由懒加载

当打包构建项目时，会把自己写的全部js打包到一个文件里面，这个js文件就会变得很大，一次性加载过来就会很耗费时间，js加载不出来页面还会出现空白。这时候用路由懒加载，就把这些不同路由的js打包成单独的js文件，只有在路由访问时才加载对应的js文件

  1. //import cpnAbout from '../components/about.vue'
  2. //import cpnUser from '../components/user.vue'
  4. //路由懒加载不用写上面的import，用下面这种写法
  5. const About ={
  6.     path:'/about',
  7.     component:()=>import('../components/about.vue')
  8. };
  9. const User ={
  10.     path:'/user/:user_id',
  11.     component:()=>import('../components/user.vue')
  12. };

用了路由懒加载，当你使用这个路由的时候，会加载一个单独的js文件。把路由下的功能封装在一个文件里面
image.png

嵌套路由/子路由

image.png

  1. 创建对应的子组件，并在对应的路由映射中路由映射中配置相应的子路由

    1. //这是子路由，是个对象，赋值到一个常量News
    2. const News ={
    3.  path:'news',
    4.  component:()=>import('../components/news.vue')
    5. }
    6. //Home是一个父路由
    7. const Home ={
    8.  path:'/home',
    9.  component:cpnHome,
    10.  //在对应的路由里面写上他的子路由
    11.  children:[
    12.      News
    13.  ]
    14. };

  2. 子路由的组件肯定是显示到父路由的组件里面，在父路由的组件模板里面加上router-view，用来显示子路由组件。

    1. <template>
    2. <h1>欢迎来到首页</h1>
    3. <router-link to="/home/news">新闻</router-link>
    5. <router-view></router-view>
    6. </template>

    注意：路由后面跟了动态参数的，在给他弄一个子路由，会冲突，子路由直接被当成路由后面的动态参数

全局导航守卫

每一步路由都会被记录。
首先在路由对象里面加一个属性meta，一般在里面放一些这个路由的信息。最好在每个路由对象创建时就加入这些属性，方便后来使用。

  1. const About ={
  2.     path:'/about',
  3.     component:()=>import('../components/about.vue'),
  4.     meta:{
  5.         title:"关于"
  6.         //当然还可以定义图标之类的
  7.     }
  8. };
  1. const history =createWebHistory();
  2. const router = createRouter({
  3.     routes,
  4.     history
  5. });
  6. //用这个方法,在vue-router4.x版本最多传2参数，不通版本可以看源码。
  7. //to和from都是一个路由对象，to表示目标跳转的路由，from表示从哪个路由跳转过去的
  8. router.beforeEach((to,from)=>{
  9.       document.title=to.meta.title;//设置当前页面的浏览器标题
  10.     console.log("目标："+to.meta.title);
  11.     console.log("从哪里来："+from.meta.title);
  12. })