• vue1与vue2的路由 以及vue2项目大概了解


    vue1的路由

    1、设置根组件  Vue.extend()

    2、设置局部组件  Vue.extend({template:"/home"})

    3、实例化路由   var router =new VueRouter()

    4、关联路由      router.map({"./",组件名字})

    5、开启路由     router。start(“根组件”,“#box“)

    6、配置默认选项  router.redirect("/","/home")

    <script>
    //设置根组件
    var root = Vue.extend();
    //设置局部组件 例子有三个局部组件
    var Home = Vue.extend({
    template: "<h2>首页</h2>"
    });
    var About = Vue.extend({
    template: "<h2>关于</h2>"
    });
    var New = Vue.extend({
    template: "<h2>新闻</h2>"
    });
    //实例路由
    var router = new VueRouter();
    //关联路由
    router.map({
    "home": {
    component: Home
    },
    "about": {
    component: About
    },
    "new": {
    component: New
    }
    });
    //开启路由
    router.start(root, "#box");
    //配置默认项
    router.redirect({
    "/": "/home"
    })
    </script>
     
    现在用vue1的项目很少了  大多都用vue2de项目
     

    vue2的路由

    vue2的路由 与vue1的路由 有一部分相同  意思一样

    1、导入vue

    2、定义组件

    3、Vue调用vue-router插件

    4、定义组件(与定义局部组件意思大概一样)

    5、实例化路由

    6、实例化路由&&视图

    //导入vue
    import Vue from "vue"
    //定义组件
    import VueRouter from "vue-router";
    //vue调用vue-router插件
    Vue.use(VueRouter)
    //定义组件
    const first={template:"<h2>First</h2>"}
    const second={template:"<h2>Second</h2>"}
    const third={template:"<h2>Third</h2>"}
    //实例路由
    const router=new VueRouter({
    mode:"history", // 模式
    base:__dirname, //相对路径
    routes:[
    {path:"/first",component:first},
    {path:"/second",component:second},
    {path:"/third",component:third},
    ]
    })
    //实例化
    new Vue({
    router,
    template: //模板字符串
    `    ------>      // 模板字符串            重要重要重要重要重要重要
    <div> <--必须加一个容器-->
    <h2>导航</h2>
    <div>
    <ul>
    <li><router-link to="/first">first</router-link></li>
    <li><router-link to="/second">second</router-link></li>
    <li><router-link to="/third">third</router-link></li>
    </ul>
    <div>
    <router-view></router-view>
    </div>
    </div>
    </div>
     
    `
    }).$mount("#app")  <!--这里挂载app-->
    main.js 中这样写

    今天写vue1和vue2 想起了vue项目就跟大家  说一说vue项目的创建吧

    第一步咱们先把 脚手架安装好   这是前提前提   npm install -g vue-cli  全局的 安装一次就好了

    第二步初始化项目  vue init webpack  project(这是项目的名字)

    第三步进入项目   cd  project

    第四步安装依赖  这是重要的如果不安装 可能出问题   npm install    如果咱们拷贝别人的项目必须在安装一次项目依赖   因为每台电脑都不一样  需要安装的依赖不一样

    第五步 启动项目  npm run dev

    最后一步  就是  项目完成了  那就打包(内容有点多就不写了)

    启动项目后出现的shi下图  恭喜你创建项目success

  • 相关阅读:
    知乎 : 有什么你认为很简单的问题实际的证明却很复杂?
    民科吧 的 一题 : ∂ f / ∂ x =
    知乎: Lurie 的 derived algebraic geometry 有多重要?
    说说 网友 专业证伪 的 那道 几何题
    在 《数学问题,连接两个点的曲线旋转所成曲面中,面积最小的曲线是什么?》 里 的 讨论
    证明 夹逼定理 和 洛必达法则
    一道数学题 : 数列 { bn } 收敛, 证明 { an } 也收敛
    一道数学题 : f ( 2^x ) + f ( 3^x ) = x , 求 f ( x )
    网友 lzmsunny96 的 一个 分数 分解题
    我 搞了一个 尺规作图 不能 实现 三等分角 的 证明
  • 原文地址:https://www.cnblogs.com/calledspeed001/p/7096643.html
Copyright © 2020-2023  润新知