vue路由的使用(简单理解)

<!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>

总结

router是vue路由管理器对象，用来管理路由
route是路由对象，一个路由就对应了一条访问路径，一组路由用routes
每个路由对象，都有两部分：path路径，component组件
router-link是对a标签的封装，通过to属性指定链接
router-view 路由访问到指定的组件，进行页面展示

vue路由的使用(简单理解)

总结

辉辉

引用和评论

数组的末尾添加、替换、删除、任意位置插入、获取