vue路由与动态路由

1、vue路由与动态路由

Vue是一个流行的JavaScript框架，提供了一种称为Vue Router的插件，用于管理单页面应用程序的路由。Vue Router允许开发人员定义应用程序的不同页面，并根据不同的URL路径导航到这些页面。Vue Router还提供了动态路由的概念，允许开发人员根据不同的参数生成不同的页面。以下是Vue路由和动态路由的详细介绍。

Vue路由

Vue路由是Vue Router插件的一部分，用于在Vue应用程序中管理路由。Vue Router使开发人员可以定义应用程序的不同页面，然后根据URL路径导航到这些页面。这些页面在Vue应用程序中表示为组件，可以使用Vue的模板语法进行定义。

importVuefrom'vue'
importVueRouterfrom'vue-router'
importHomefrom'./components/Home.vue'
importAboutfrom'./components/About.vue'
​
Vue.use(VueRouter)
​
constrouter=newVueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

在这个例子中，Home和About组件都是从'./components'导入的。路由是通过将路径映射到组件来定义的。在这里，'/'路径映射到Home组件，'/about'路径映射到About组件。

动态路由

动态路由是Vue Router插件的一个特性，它允许开发人员定义具有不同参数的路由。这些参数可以根据URL路径动态生成，然后用于查找或显示相关数据。

以下是一个动态路由的示例，其中定义了一个名为Post的页面：

javascriptCopycodeimportVuefrom'vue'
importVueRouterfrom'vue-router'
importPostfrom'./components/Post.vue'
​
Vue.use(VueRouter)
​
constrouter=newVueRouter({
  routes: [
    { path: '/post/:id', component: Post }
  ]
})

在这个例子中，路径/post/:id定义了一个动态路由，其中id是一个参数。当URL路径匹配此路由时，Vue Router将参数的值传递给Post组件。然后，Post组件可以使用该值查找或显示相关数据。例如，如果URL路径为/post/1，则id参数的值为1。

动态路由允许开发人员根据不同的参数生成不同的页面，这对于需要显示动态数据的应用程序非常有用。

使用方法

1、安装 Vue Router：

npm install vue-router

2、在 main.js 中引入并使用 Vue Router：

importVuefrom'vue'
importVueRouterfrom'vue-router'
importAppfrom'./App.vue'
importAdminPagefrom'./components/AdminPage.vue'
importUserPagefrom'./components/UserPage.vue'
​
Vue.use(VueRouter)
​
constroutes= [
  { path: '/admin', component: AdminPage },
  { path: '/user', component: UserPage },
]
​
constrouter=newVueRouter({
  routes
})
​
newVue({
  router,
  render: h=>h(App),
}).$mount('#app')

3、在组件中使用路由：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>
​
<script>
exportdefault {
  name: 'Page',
  data() {
    return {
      title: '',
      description: '',
    }
  },
  created() {
    constrole=this.$route.path.slice(1)
    if (role==='admin') {
      this.title='管理员页面'
      this.description='欢迎来到管理员页面'
    } elseif (role==='user') {
      this.title='普通用户页面'
      this.description='欢迎来到普通用户页面'
    }
  },
}
</script>

动态路由讲解

首先，在路由配置中，我们定义一个动态路由：

constroutes= [
  {
    path: '/movie/:id',
    name: 'movie',
    component: MovieDetail
  }
]

上述路由中的 :id 表示一个动态路由参数，它对应电影的唯一 id。当用户进入一个形如 /movie/123 的路由时，Vue Router 会将 123 解析为路由参数 id 的值，并将其传递给 MovieDetail 组件。

接下来，我们可以在 MovieDetail 组件中通过 $route.params.id 来获取路由参数 id 的值，然后根据该值来获取对应的电影数据，最终渲染电影详情页面。示例代码如下：

<template>
  <div>
    <h1>{{ movie.title }}</h1>
    <p>{{ movie.description }}</p>
  </div>
</template>
​
<script>
exportdefault {
  data() {
    return {
      movie: {}
    }
  },
  created() {
    constmovieId=this.$route.params.id
    // 通过 movieId 获取对应的电影数据
    this.movie=getMovieById(movieId)
  }
}
</script>

在上述代码中，created 钩子函数会在组件创建时自动调用，我们可以在其中通过 $route.params.id 获取路由参数的值，并通过自定义的函数 getMovieById 获取对应的电影数据，然后将数据保存在组件的 data 属性中，最后在模板中渲染电影详情页面。

当用户访问 /movie/123 路径时，Vue Router 会自动将 123 解析为路由参数 id 的值，并将其传递给 MovieDetail 组件的 created 钩子函数。在该钩子函数中，我们根据 id 的值获取对应的电影数据，并将其保存在组件的 data 属性中，最终在模板中渲染电影详情页面。

在 Vue 中，可以使用 $router 对象来进行路由的导航。其中，$router 对象提供了一些方法，例如 push 和 replace，来实现页面的跳转。

下面是一个使用 Vue 动态路由的例子，展示如何通过 JavaScript 代码来实现页面跳转：

<template>
  <div>
    <h1>VueDynamicRoutingExample</h1>
    <p>Clickthelinksbelowtonavigatetodifferentpages:</p>
    <ul>
      <li>
        <router-link :to="{ name: 'home' }">Home</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'about' }">About</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'contact' }">Contact</router-link>
      </li>
    </ul>
   <button@click="goToPage">点击我跳转</button>
    <router-view></router-view>
  </div>
</template>
​
<script>
exportdefault {
  name: 'App',
  methods: {
    goToPage(pageName) {
      this.$router.push({ name: pageName });
    },
  },
};
</script>

在上述代码中，我们首先在模板中创建了一个包含链接的列表，用于导航到不同的页面。链接使用 router-link 组件来实现，其 to 属性使用了动态路由的方式，指向了不同页面的路由名称。

接着，在 Vue 组件中，我们定义了一个 goToPage 方法，用于实现页面的跳转。在方法中，我们通过 $router 对象的 push 方法来进行页面的导航，指向了目标页面的路由名称。

在这个例子中，我们使用了动态路由的方式来创建页面之间的导航，以及通过 $router 对象来实现页面的跳转。