Vue路由机制--Router基础 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue路由机制--Router基础</title>

    </head>

    <body>
        <div id="app">
         <!-- 官网: https://router.vuejs.org/zh/ -->
         <!-- 包含的功能
         支持html5历史模式或者hash模式
         支持嵌套路由
         支持路由参数
         支持编程式路由
         支持命名路由 -->
         
         <!-- 使用步骤
         1.引入相关的库文件
         2.添加路由链接
         3.添加路由填充位
         4.定义路由组件
         5.配套路由规则并创建路由实例
         6.把路由挂载到Vue根实例中 -->
         
         
         <!-- ----------------------------- -->
         <!-- 2.添加路由连接 -->
         <router-link to="/user">User</router-link>
         <router-link to="/reg">Reg</router-link>
         
         <!-- 3.路由占位符 -->
         <router-view></router-view>
        </div>
        
        
    </body>
    <!-- 1.引入相关文件 -->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vue-router.js"></script>
    
    <script type="text/javascript">    
       
       //4.创建路由组件
       const User={
           template:'<h1>User组件</h1>'
       }
       const Reg={
                  template:'<h1>Reg组件</h1>'
       }
     
     //5.配置路由规则并创建路由实例
     var router=new VueRouter({
         //所有的路由规则
         routes:[
             //每个路由规则都是一个配置对象，其中至少包含path和component两个属性
             //path 表示当前路由规则匹配的hash地址
             //component:只接收组件对象。表示当前路由规则对应要展示的组件
             {path:'/user',component:User},
             {path:'/reg',component:Reg},
             //路由重定向：默认主页。
             //redirect:将某地址重定向到某个页面地址
             {path:'/',redirect:'/user'},
         ]
     })
       
       const vm=new Vue({
           el:'#app',
           router:router,//挂载路由实例对象
       })
       
    </script>
</html>

 

posted @ 2021-07-08 09:51  王彬-效率开发  阅读(97)  评论(0)    收藏  举报