MVVM and MVC区别 ,vue路由和嵌套路由

2023年10月14日 157次阅读 来源: 燕妮666_

先来给大家介绍一下vue吧，vue是一个操作用户界面的渐进式框架，一个MVVM框架，M=>model,V=>view,VM=>ViewModel，而angular则是MVC框架。MVC和MVVM的区别就是：
1.MVC是单向的数据绑定，MVVM是双向数据绑定。
2.MVVM是MVC衍生而来，而MVC是从后台而来的。
3.MVVM的js文件是外部引入而来的，修改时也比较方便。提高了用户体验，增快网页加载速度。
vue相对同时vue是相应的双向数据绑定。
首先，vue路由必须有vue-router.js文件，路由中有三个重要的基本概念：
1.route:{path:””,component:””}(一组路由)
2.routes:{path:””,component:””}，{path:””,component:””}（多组路由）
3.router:路由管理器
首先HTML页面是先通过两个标签：router-link and router-view
router-link标签用来定义页面中点击的部分，其中to属性用来点击后跳转的路径。
router-view标签现实点击后的要显示的内容
屡一下思路:

//1.定义路由组件：路由对应的组件
                    const Foo = { template: '<div>foo</div>' }
                    const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
    router
}).$mount('#app')```
嵌套路由就是子路由，子路由就是在路由组件中添加一个对象children;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <h1>大哥给你做子路由，睁大眼睛哦！！！</h1>
        <p>
            <router-link to="/home">home</router-link>
            <router-link to="/contact">contact</router-link>
        </p>
        <router-view></router-view>
        </div>
        <template id="home">
            <div>
                <h2>首页</h2>
                <router-link to="/home/one">one</router-link>
                <router-link to="/home/two">two</router-link>
                <router-view></router-view>
            </div>
        </template>
        <template id="one">
            <h3>我是自路由1</h3>
        </template>
        <template id="two">
            <h3>我是自路由2</h3>
        </template>
        <template id="contact">
            <h1>联系</h1>
        </template>
    
    <script type="text/javascript">
        const Home = {
            template: "#home"
        }
        const One = {
            template: "#one"
        }
        const Two = {
            template: "#two"
        }
        const Contact = {
            template: "#contact"
        }
        const routes = [{
                path: "/home",
                component: Home,
                children: [
                    { path: "/home/one", component: One },
                    { path: "/home/two", component: Two }
                ]
            },
            { path: "/contact", component: Contact },
            { path: "*", redirect: "/home" }

        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount("#app");
    </script>
</body>

</html>

**last**,vue还有很多特性，想知道更多顶尖技术交流记得点击关注按钮关注我呦，一句晚安送给深夜的码农们。
    原文作者：燕妮666_
    原文地址: https://www.jianshu.com/p/1094e87eb01f
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞