vue路由的定义、起始页面、切换、高亮显示

原理：

1.浏览器持续监听着path属性的变换，从而使其对应的component组件发生变化，页面内同改变。

2.理解router-view元素的占位符的作用

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    
    <style>
        .router-link-active,.myActive{
            color: cornflowerblue;
            font-weight: bold;
            font-style: italic;
            font-size: larger;
        }
        /*默认的激活属性，可以通过linkActiveClass在构造对象中调用来更改这个名字*/
    </style>
</head>
<body>

      <div id="app">

          <!--<a href="#/login">登录</a>-->
          <!--<a href="#/register">注册</a>-->
          <!--&lt;!&ndash;#表示哈希&ndash;&gt;-->
          
          <router-link to="/login" tag="span">登录</router-link>
          <router-link to="/register">注册</router-link>
          <!--router-link默认渲染成a标签，tag控制渲染成其他标签-->
          
          <router-view></router-view>
      </div>
      <!--vue-router提供的的元素，充当组件的占位符-->

      <script>
          var login = {
            template:'<h1>登录页面</h1>'  
          };
          //组件模板对象
          
          var register = {
            template:'<h1>注册页面</h1>'  
          };
          
          var routerObj = new VueRouter({
          // Router为导入路由包时，创建的路由构造函数
              
              routes:[//表示路由匹配规则
                  // {path:'/',component:login},如果用这种方法，刚加载完成后和再次跳转回来路径可能不一致，造成困扰
                  {path:'/',redirect:'/login'},
                  //文本替换
                  {path:'/login',component:login},
                  {path:'/register',component:register}
              //路由的匹配规则，必须有path和component两个属性。path表示监听哪个路由链接地址，component属性表示，显示对应的path的组件
              //component对应的属性名，必须是组件的模板对象，不能是组件的应用的对象
              ],
              linkActiveClass:'myActive'
          });
          
          var vm = new Vue({
             el:'#app',
             data:{},
             router: routerObj  //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，并展示对应的组件
          });
      </script>
      
</body>
</html>

效果：

vue路由的定义、起始页面、切换、高亮显示

原理：

猜你喜欢