Vue路由的基本使用

最新推荐文章于 2025-05-24 16:02:32 发布

北海之灵

最新推荐文章于 2025-05-24 16:02:32 发布

阅读量291

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue-router

本文链接：https://blog.youkuaiyun.com/xukongjing1/article/details/82857198

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了一个使用Vue.js和Vue Router构建的单页应用实例。通过具体代码展示了如何设置路由、激活样式、过渡效果以及组件展示。同时，文章还介绍了如何自定义路由高亮类和实现页面之间的过渡动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
   <style type="text/css">
    .router-link-active,.myactive{
      color:red;
      font-weight: bold;
      font-style: italic;;
      font-size:40px;
      text-decoration: underline;;
    }
    .v-enter,
    .v-leave-to{
      opacity: 0;
      transform: translateX(140px);
    }
    .v-enter-active,
    .v-leave-active{
      transition: all 0.5s ease;
    }
   </style>
  </head>
<body>
  <div id='app' style="margin-left:20px">
    <!-- router-link默认渲染为一个a 标签 -->
    <router-link to="/login" tag='span'>登录</router-link>
    <router-link to="/register">注册</router-link>
    <!-- vue-router提供的元素，专门用来当做占位符的，将来，路由规则匹配到的组件，就会展示到router-view中 -->
    <transition mode='out-in'>
      <router-view></router-view>
    </transition>
  </div>
  
</body>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router-3.0.1.js"></script>
<script>
  //组件的模板对象
  var login = {
    template:'<h1>登录组件</h1>'
  }

  var register = {
    template:'<h1>注册组件</h1>'
  }
  //创建一个路由对象，当导入 vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做 VueRouter
  //在 new 路由对象的时候，可以为构造函数，传递一个配置对象
  var routerObj = new VueRouter({
    //linkActiveClass 是路由高亮的类，默认是router-link-active。
    linkActiveClass:'myactive',
   // route //这个配置对象中的route表示 路由匹配规则 的意思
    routes:[ //路由匹配规则
    //每个路由规则，都是一个对象，这个对象有2个必须属性
    //属性1是path,表示监听哪个路由链接地址
    //属性 2是component,表示如果路由是前面匹配到的Path，则展示 component 属性对应的那个组件
    //注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
      {path:'/',redirect:'/login'},//这里的redirect和Node中的redirect完全是两码事
      {path:'/login',component:login},
      {path: '/register',component:register}
    ]
  })
  var vm = new Vue({
    el:'#app',
    data:{
      
    },
    methods:{
    },
    router:routerObj//将路由规则对象，注册到 vm实例上，用来监听URL地址的变化，然后展示对应的组件

  })
</script>
</html>