乐趣区

关于vue-router:vue路由的使用简单理解

jiezi 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1> 尺寸.com</h1>
        <p>
            <!-- 增加超链接 router-link 组件  to 属性指定链接 -->
            <router-link to="/home">HOME</router-link>
            <router-link to="/news">NEWS</router-link>
        </p>

        <!-- 路由的进口，路由匹配到组件之后，要渲染到这里 -->
        <router-view></router-view>
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/vue-router.min.js"></script>
<script>
    // 1、定义路由所需的组件
    const home = {template:"<div> 首页 </div>"};
    const news = {template:"<div> 新闻 </div>"};
    // 2、定义路由 每个路由有两局部 path(门路)，component(组件)
    const routes = [{path:"/home",component:home},
        {path:"/news",component:news}
    ];
    // 3、创立路由管理器实例
    const router = new VueRouter({routes:routes});
    // 4、创立 vue 实例  将 router 注入到 vue 实例中，让整个利用都领有路由的性能
    var vm = new Vue({router}).$mount('#app'); // 代替 el
</script>
</html>

总结

  1. router 是 vue 路由管理器对象，用来治理路由
  2. route 是路由对象，一个路由就对应了一条拜访门路，一组路由用 routes
  3. 每个路由对象，都有两局部：path 门路，component 组件
  4. router-link 是对 a 标签的封装，通过 to 属性指定链接
  5. router-view 路由拜访到指定的组件，进行页面展现
退出移动版