章节六：路由和导航

最新推荐文章于 2024-08-22 17:38:39 发布

qq_27280353

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量30

点赞数

分类专栏： Vue.js从入门到入土文章标签：前端 vue.js javascript 开发语言

本文链接：https://blog.csdn.net/qq_27280353/article/details/131542442

版权

Vue.js从入门到入土专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章介绍了如何使用VueRouter这个官方提供的路由管理器在Vue.js应用中实现路由功能，包括定义组件、创建VueRouter实例、设置路由、使用和进行导航。此外，还提到了路由传参和路由守卫的概念。

摘要由CSDN通过智能技术生成

6.1 使用Vue Router实现路由功能

Vue Router是Vue.js官方提供的路由管理器，可以帮助我们实现单页应用中的路由功能。通过Vue Router，我们可以定义不同的路由，并在应用中进行导航。

以下是一个示例代码，演示了如何使用Vue Router实现路由功能：

<!DOCTYPE html>
<html>
<head>
  <title>使用Vue Router实现路由功能</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 创建组件
    const Home = { template: '<div>Home</div>' };
    const About = { template: '<div>About</div>' };

    // 创建Vue Router实例
    const router = new VueRouter({
      routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About }
      ]
    });

    // 创建Vue实例
    new Vue({
      el: '#app',
      router
    });
  </script>
</body>
</html>

在上述示例中，我们首先创建了两个组件Home和About，分别用于展示不同的页面内容。

然后，我们创建了一个Vue Router实例，并在其选项中定义了两个路由。每个路由都有一个path表示路径，和一个component表示对应的组件。

在Vue实例中，我们将Vue Router实例通过router选项进行配置，并在模板中使用<router-link>组件来定义导航链接，使用<router-view>组件来展示当前路由对应的组件。

当你在浏览器中运行上述代码时，你可以看到页面上有两个导航链接Home和About，点击不同的链接时，对应的组件内容会在页面中展示出来。

6.2 定义和导航到不同的路由

在Vue Router中，我们可以通过定义不同的路由来实现不同页面之间的导航。

以下是一个示例代码，演示了如何定义和导航到不同的路由：

<!DOCTYPE html>
<html>
<head>
  <title>定义和导航到不同的路由</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 创建组件
    const Home = { template: '<div>Home</div>' };
    const About = { template: '<div>About</div>' };

    // 创建Vue Router实例
    const router = new VueRouter({
      routes: [
        { path: '/', component: Home },
        { path: '/about', component: About }
      ]
    });

    // 创建Vue实例
    new Vue({
      el: '#app',
      router
    });
  </script>
</body>
</html>

在上述示例中，我们定义了两个路由：'/'表示根路径对应的组件是Home，'/about'表示/about路径对应的组件是About。

通过<router-link>组件，我们可以在页面中创建导航链接。例如，点击Home链接将会导航到根路径，对应的Home组件内容会显示出来。

6.3 学习路由传参和路由守卫

在实际开发中，我们经常需要在路由之间传递参数，以满足不同页面的需求。Vue Router提供了多种方式来实现路由传参。

以下是一个示例代码，演示了如何在路由之间传递参数和使用路由守卫：

<!DOCTYPE html>
<html>
<head>
  <title>路由传参和路由守卫</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-link :to="{ path: '/user', query: { id: 1 }}">User</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 创建组件
    const User = {
      template: `
        <div>
          <h2>User</h2>
          <router-link :to="{ path: '/profile', params: { id: userId }}">Profile</router-link>
        </div>
      `,
      data() {
        return {
          userId: 1
        };
      }
    };

    const Profile = {
      template: `
        <div>
          <h2>Profile</h2>
          <p>用户ID: {{ $route.params.id }}</p>
        </div>
      `
    };

    // 创建Vue Router实例
    const router = new VueRouter({
      routes: [
        { path: '/user', component: User },
        { path: '/profile', component: Profile }
      ]
    });

    // 创建Vue实例
    new Vue({
      el: '#app',
      router
    });
  </script>
</body>
</html>

在上述示例中，我们定义了两个组件：User和Profile。

在User组件中，我们使用<router-link>组件来创建导航链接，并通过to属性传递了一个包含参数的对象。这里使用了query属性来传递参数，参数名为id，值为1。

在Profile组件中，我们通过$route.params来访问路由参数，这里的参数名为id。

当你在浏览器中运行上述代码时，你可以点击User链接，然后导航到Profile页面，同时URL中的参数会被传递给Profile组件，并在页面中显示出来。

此外，Vue Router还提供了路由守卫的功能，可以在路由切换前后执行一些操作，比如进行权限验证或日志记录等。有关路由守卫的详细讲解，请参考Vue Router的官方文档。

qq_27280353

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
章节六：路由和导航

此外，Vue Router还提供了路由守卫的功能，可以在路由切换前后执行一些操作，比如进行权限验证或日志记录等。Vue Router是Vue.js官方提供的路由管理器，可以帮助我们实现单页应用中的路由功能。通过Vue Router，我们可以定义不同的路由，并在应用中进行导航。在实际开发中，我们经常需要在路由之间传递参数，以满足不同页面的需求。然后，我们创建了一个Vue Router实例，并在其选项中定义了两个路由。在Vue Router中，我们可以通过定义不同的路由来实现不同页面之间的导航。
复制链接

扫一扫