Vue路由重定向和别名的示例代码

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 定义路由组件
const Home = { template: '<div>Home Component</div>' };
const About = { template: '<div>About Component</div>' };

// 创建路由器实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    // 添加一个重定向规则
    { path: '/home', redirect: '/' }
  ]
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

const router = new VueRouter({
  routes: [
    // 假设我们有一个用户列表页面
    { path: '/users', component: Users },
    // 并且我们想让用户在访问/users/:userId时自动跳转到/user/:userId
    { path: '/users/:userId', redirect: to => ({ path: '/user/' + to.params.userId }) }
  ]
});

const router = new VueRouter({
  routes: [
    { path: '/products', component: Products, alias: '/items' },
    // 我们可以定义多个别名
    { path: '/offers', component: Offers, alias: ['/promotions', '/deals'] }
  ]
});

const router = new VueRouter({
  routes: [
    { path: '/product/:productId', component: ProductDetail, alias: '/item/:productId' }
  ]
});

const router = new VueRouter({
  routes: [
    { path: '/dashboard', component: Dashboard },
    { path: '/login', component: Login },
    { path: '/', redirect: () => {
      // 如果用户已登录，重定向到仪表盘，否则重定向到登录页面
      return store.getters.isLoggedIn ? '/dashboard' : '/login';
    }},
    { path: '/account', alias: '/profile', component: Account }
  ]
});