zoukankan      html  css  js  c++  java
  • Vue--路由

    main.js:

    1、先在项目安装路由模块:npm install vue-router --save-dev
    2、使用路由:main.js首先要引用vue模块:

    import Vue from 'vue'

    3、再引用路由模块:

    import VueRouter from ‘vue-router’

    4、使用VueRouter:

    Vue.use(VueRouter)

    5、配置路由:

    import Home from './components/home' /父级组件
    import HelloWorld from './components/HelloWorld' /子组件
    
    
    const router = new VueRouter({
        routes:[
            {path:‘/’,component:Home}//主页地址
            {path:‘/helloworld’,component:HelloWorld}//地址
        ],
         mode:‘history’  //添加这个属性后页面地址就不存在#/的问题 })

    6、引用配置好的路由router:

    new Vue({
       router,
      el:'#app' components: { App },//这是根组件
      templater:'<App/>' })

    根目录:这里是App.vue

    7、找到路径后,在根组件展示:

    <router-view></router-view>

    此时刷新界面页面地址变成http://localhost:8080/#/,

    当在地址输入http://localhost:8080/#/helloworld,就会跳转到helloworld这个界面

    7、写到这里就可以使用a标签跳转了

    但是会刷新界面

    根目录:App.vue

    <templater>
        <div id='app'>
            <router-view></router-view>
            <ul>
          <
    li><a href='/'>home</a></li>  //href的地址必须是配置路由的地址 <li><a href='/helloworld'>hello</a></li>  //href的地址必须是配置路由的地址
         </
    ul>   </div> </templater>

    8、路由跳转:

    不会刷新界面,高效率!

    <templater>
        <div id='app'>
            <router-view></router-view>
            <ul>
          <
    li><router-link to='/'>home</router-link></li>  //href的地址必须是配置路由的地址 <li><router-link to='/helloworld'>hello</router-link></li>  //href的地址必须是配置路由的地址
         </
    ul>   </div> </templater>
  • 相关阅读:
    CSS笔记
    WebStorm快捷键
    单例模式详解
    JS正则表达式
    Java NIO 详解(二)
    Java NIO 详解(一)
    【Java并发编程】之十六:深入Java内存模型——happen-before规则及其对DCL的分析(含代码)
    Go 普通LOG输出
    Go TCP网路程序编写
    Go 语言官方包函数中文翻译
  • 原文地址:https://www.cnblogs.com/xinchenhui/p/8650573.html
Copyright © 2011-2022 走看看