zoukankan      html  css  js  c++  java
  • 【vue-05】vue-cli

    Vue-router官网

    安装

    vue-router是一个插件包,所以我们还是需要用npm 来进行安装。打开命令行工具,进入你的项目目录,输入下面命令。

    npm install vue-router --save
    

    如果在一个模块化工程中使用它。必须通过Vue.use()明确地安装路由功能

    注意:先引入vue,再引入vue-router

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    //显示声明使用VueRouter
    Vue.use(VueRouter);
    

    测试

    1. 创建一个vue-cli程序 参考链接

    2. 安装 参考安装标题

    3. 新建组件src/components/Content.vue和Main.vue

    Content.vue

    <template>
        <h1>内容</h1>
    </template>
    
    <script>
        export default {
            name: "Content"
        }
    </script>
    
    <style scoped>
    
    </style>
    

    Main.vue

    <template>
        <h1>主页</h1>
    </template>
    
    <script>
        export default {
            name: "Main"
        }
    </script>
    
    <style scoped>
    
    </style>
    
    1. 在src下新建一个文件router/index.js,进行创建路由和路由映射

    默认情况下,我们进入一个网站的首页,应该先把首页渲染。所以可以设置默认路径

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    //导入上面自定义的组件
    import Content from "../components/Content";
    import Main from "../components/Main";
    //安装路由
    Vue.use(VueRouter);
    
    //配置导出路由
    export default new VueRouter({
      routes:[
        {
          path: '/',
          redirect: '/main'
     	},
        {
          //路由路径
          path:'/content',
          //跳转的组件
          component:Content
        },
        {
          //路由路径
          path:'/main',
          //跳转的组件
          component:Main
        },
      ]
    });
    
    1. 在main.js中挂载路由
    import Vue from 'vue'
    import App from './App.vue'
    import router from "./router"
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
      router
    }).$mount('#app')
    
    
    1. 在App.vue中使用路由
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <HelloWorld/>
        <router-link to="/main">首页</router-link>
        <router-link to="/content">内容</router-link>
        <router-view></router-view>
      </div>
    </template>
    ....
    
    1. 实现效果

    我们会发现URL中存在#,那怎么消除呢?

    localhost:8081/#/content
    

    使用HTML5的history模式

    默认情况下,路径的改变使用的是URL的hash,如果我们希望使用H5的History模式,可以进行如下配置mode: 'history'

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    //导入上面自定义的组件
    import Content from "../components/Content";
    import Main from "../components/Main";
    //安装路由
    Vue.use(VueRouter);
    
    //配置导出路由
    export default new VueRouter({
      routes:[
        {
          path: '/',
          redirect: '/main'
     	},
        {
          //路由路径
          path:'/content',
          //跳转的组件
          component:Content
        },
        {
          //路由路径
          path:'/main',
          //跳转的组件
          component:Main
        },
      ],
      mode: 'history'
    });
    
  • 相关阅读:
    洛谷 P6851 【onu】贪心
    联赛模拟测试12 C. sum 莫队+组合数
    晚间测试4 哪一天她能重回我身边 神奇建图+基环树
    联赛模拟测试11 D. 甜圈 线段树维护哈希值
    CF741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths 树上启发式合并(DSU ON TREE)
    CF788B Weird journey 题解
    联赛模拟测试10 C. 射手座之日
    晚间测试3 B. 单(single)
    CF538B Quasi Binary 思维题
    CF600E Lomsat gelral 树上启发式合并
  • 原文地址:https://www.cnblogs.com/10134dz/p/13602493.html
Copyright © 2011-2022 走看看