vue-router 的重定向

vue-router 的重定向

课程来自 https://www.jspang.com

react-router-dom，想要重定向到自己想要的页面，比如

<Router>
	<Route path="/" exact>
    	{isLoggin ? <Redirect to="/dashboard" /></Redirec>: <PublicHomePage /></PublicHomePag>}
    </Route>
</Router>

vue-router 中，是在路由配置文件 router.js 中，配置 redirect 对象的值。

import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@/components/HelloWorld'
import Params from '@/components/Params';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello,
        },
        {
            path: '/params/:newsId(\\d+)/:newsTitle',
            component: Params,
        },
        {
            path: '/gohome',
            redirect: '/',
        },
        {
            path: '/goparams/:newId(\\d+)/:newsTitle',
            redirect: '/params/:newsId(\\d+)/:newsTitle'
        }
    ]
})

来看一下 App.vue 文件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p>
      <router-link to="/">Home</router-link>|
      <router-link to="/params/198/qian">params</router-link>|
      <router-link to='/gohome'>gohome</router-link>|
      <router-link to="/params/133/vue.js is awesome!">goparams</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.right {
  float: left;
  width: 50%;
  height: 300px;
  background-color: #ccc;
}

.left {
  float: left;
  width: 50%;
  height: 300px;
  background-color: #c0c;
}
</style>

当我们点击 gohome 或者 goparams 时，会重定向到 '/'或者 '/params/:newsId(\\d+)/:newsTitle'。同样的，重定向也能传递参数，以下是结果：