人类高质量vue学习笔记（四）

知否技术

发布于 2021-09-02 14:56:14

8570

发布于 2021-09-02 14:56:14

文章被收录于专栏：eclipse编程eclipse编程

1. 路由

引言

说起路由大家可能会立即联想到家里的路由器，我们都知道那玩意是用来分发网络的。

路由其实就是一种对应关系。

比如说我们在浏览器中输入网址，浏览器要去请求这个 url 地址对应的资源。url 地址和资源之间存在的对应的关系，就是路由。

vue 中的路由其实就像一个路由器，它可以根据用户的请求路径按照一定的规则转发到不同的页面。

VueRouter 是 Vue.js 官方提供的路由管理器，功能非常强大。

2. 快速使用

2.1 引入 js 文件

最关键是 vue-router.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2.2 创建组件

这里我们新建用户管理和订单管理两个组件

const user = {
  template:'<h2>欢迎来到用户管理界面</h2>'
};

const order = {
  template:'<h2>欢迎来到订单管理界面</h2>'
};

2.3 创建路由对象并配置路由规则

 //创建路由对象
const newRouter = new VueRouter({
  routes:[
    {path:'/user',component:user},  
    {path:'/order',component:order}
  ]
});

path：跳转的路径。
component：路径对应的组件，说白了就是根据路径跳转到相应的页面。

2.4 将路由对象挂载到 vue 实例

router: newRouter，就是将路由对象挂载到 vue 实例上。

const app = new Vue({
  el: "#app",
  data: {
  },
  methods: {
  },
  router:newRouter 
});

2.5 创建路由跳转链接

router-link 可以替换 a 标签
to：跳转路径

<router-link to="/user" tag="button">用户管理</router-link>
<router-link to="/order" tag="button">订单管理</router-link>

2.6 创建路由占位符

router-view，路由占位符，就是我们要跳转的页面会替换这一行代码。

<router-view></router-view>

2.7 完整代码

 <div id="app">
  <!-- 4. 创建路由跳转链接 -->
  <router-link to="/user" tag="button">用户管理</router-link>
  <router-link to="/order" tag="button">订单管理</router-link>
  <hr>
  <!-- 5. 路由占位符，就是我们要跳转的页面会`替换`这一行代码 -->
  <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  // 1. 新建`用户管理`和`订单管理`两个组件
  const user = {
      template: '<h2>欢迎来到用户管理界面</h2>'
  };
  const order = {
      template: '<h2>欢迎来到订单管理界面</h2>'
  };
  // 2. 创建路由对象
  const newRouter = new VueRouter({
      routes: [
          { path: '/user', component: user },
          { path: '/order', component: order }
      ]
  });
  // 3. 将路由对象挂载到 vue 实例
  const app = new Vue({
      el: "#app",
      data: {
      },
      methods: {
      },
      // 挂载路由对象
      router: newRouter
  });
</script>

运行结果：

点击用户管理：

讲解：当点击用户管理的时候，路由就会根据 "/user"路径找到对应的 user 组件，user 组件页面的内容就会替换<router-view></router-view>这一行代码，显示出“欢迎来到用户管理界面”。

3. 路由重定向

路由重定向：第一次进入页面，默认跳转的组件页面。
关键词：redirect

const newRouter = new VueRouter({
      routes: [
          { path:'/',redirect:'/order'},
          { path: '/user', component: user },
          { path: '/order', component: order }
      ]
  });

运行结果：

4. 嵌套路由

嵌套路由：路由下面有子路由，说白了就是点击父菜单，显示子菜单，点击子菜单显示对应的页面。

<div id="app">
    <router-link to="/user">用户管理</router-link>
    <!-- 5. 路由占位符，就是我们要跳转的页面会`替换`这一行代码 -->
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<template id="user">
    <div>
        <router-link to="/user/add">用户添加</router-link>
        <router-link to="/user/update">用户编辑</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
    // 1. 新建`用户管理`、`用户添加`、`用户修改`三个组件
    const user = {
        template: '#user'
    }
    const add = {
        template: '<h2>欢迎来到用户添加页面</h2>'
    };
    const update = {
        template: '<h2>欢迎来到用户修改页面</h2>'   
    };
    // 2. 创建路由对象
    const newRouter = new VueRouter({
        routes: [
            {
                path: '/user',
                component: user,
                // 3. 创建嵌套路由
                children: [
                    { path: 'add', component: add },
                    { path: 'update', component: update },
                ]
            },
        ]
    });
    // 4. 将路由对象挂载到 vue 实例
    const app = new Vue({
        el: "#app",
        data: {
        },
        methods: {
        },
        // 挂载路由对象
        router: newRouter
    });
</script>

运行结果：

4.1 刚进入页面

4.2 点击用户管理

4.3 点击用户添加

5. 路由传参

5.1 query 方式

5.1.1 通过 ? 号形式拼接参数

<router-link to="/user?id=21">用户管理</router-link>

5.1.2 在跳转的组件中获取参数

const user = {
    template: '#user',
    data() {
        return {
        }
    },
    created() {
        console.log("============="+this.$route.query.id);
    },
    methods: {},
}

5.1.3 打印结果：

5.2 params 方式

5.2.1 使用 restful 方式传递参数：

<router-link to="/user/21">用户管理</router-link>

5.2.2 修改路由：

const newRouter = new VueRouter({
  routes:[
    {path:'/user/:id',component:user}   //路径中获取对应参数
  ]
});

5.2.3 在跳转的组件中获取参数：

const user = {
    template: '#user',
    data() {
        return {
        }
    },
    created() {
        console.log("============="+this.$route.params.id);
    },
    methods: {},
}

5.2.4 打印结果：

6. 路由跳转

this.$router.push(" 路径 ");

6.1 使用 js 方法跳转页面：

<div id="app">
    <router-link to="/user">用户管理</router-link>
    <!-- 5. 路由占位符，就是我们要跳转的页面会`替换`这一行代码 -->
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<template id="user">
    <div>
        <router-link to="/user/add">用户添加</router-link>
        <router-link to="/user/update">用户编辑</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>
<template id="add">
    <div>
        <h2>欢迎来到用户添加页面</h2>
        <button @click="toUserUpdate()"> 点击跳转到用户管理界面</button>
    </div>
</template>
<script>
    // 1. 新建`用户管理`、`用户添加`、`用户修改`三个组件
    const user = {
        template: '#user',
    }
    const add = {
        template: '#add',
        methods: {
            toUserUpdate(){
                this.$router.push("/user/update");
            }
        },
    };
    const update = {
        template: '<h2>欢迎来到用户修改页面</h2>'   
    };
    // 2. 创建路由对象
    const newRouter = new VueRouter({
        routes: [
            {   
                path: '/user',
                component: user,
                // 3. 创建嵌套路由
                children: [
                    { path: 'add', component: add },
                    { path: 'update', component: update },
                ]
            },
        ]
    });
    // 4. 将路由对象挂载到 vue 实例
    const app = new Vue({
        el: "#app",
        data: {
        },
        created() {
        },
        methods: {
        },
        // 挂载路由对象
        router: newRouter
    });
</script>

6.2 首先进入到用户添加页面：

6.3 点击按钮跳转到用户编辑页面：

6.4 js 方式路由跳转并传参

this.$router.push({ path:"/login",params: {id:123} });
this.$router.push({ path:"/login",query:{name:"刘华强"} });

7. 路由导航守卫

路由导航守卫：相当于门卫的作用。当你进入登录页面：放行。当你没有登录就想访问其他页面：请返回到登录页面。当导航守卫发现你没有携带 token ：请返回到登录页面。

router.beforeEach((to, from, next) => {
  // 放行登录
  if (to.path === '/login') {
    return next()
  }
  // 获取token
  const tokenStr = sessionStorage.getItem('token')
  if (!tokenStr) {
    return next('/login')
  } else {
    next()
  }
})