zoukankan      html  css  js  c++  java
  • vue(19)路由的基本使用

    使用vue create demo2创建一个新的项目,这个项目我们选择手动配置,勾选路由的选项,可以创建一个带路由的模板项目。

    这里演示不使用脚手架而是自己加入路由包给一个原始项目配置路由的方式:

    vue create demo3 这里选择vue3默认配置创建项目,这个项目本身时没有路由的。

    删除掉app.vue中多余代码,显示一个空白的页面:

    App.vue:

    <template>
      <div>
        
      </div>
    </template>

    <script>

    export default {
      name: 'App',
      components: {
      }
    }
    </script>

    <style>
    </style>
    删除component文件夹下的HelloWorld组件。
    然后开始正式配置路由:
    (1)npm install vue-router@4.0.0安装路由包
    (2)src目录下新建一个views文件夹,用来存放每个路由的大组件
    (3)views文件夹下新建两个文件Home.vue和About.vue
    Home.vue:
    <template>
      <div>
          这是Home页面
      </div>
    </template>

    <script>
    export default {

    }
    </script>

    <style>

    </style>
    About.vue:
    <template>
      <div>
          这是About页面
      </div>
    </template>

    <script>
    export default {

    }
    </script>

    <style>

    </style>
    (4)src文件夹下新建一个router文件夹,然后在router文件夹下新建一个index.js
    index.js:
    import { createRouter, createWebHistory } from 'vue-router'//引入vue-router包中的createRouter和createWebHistory 
    import Home from '../views/Home.vue'
    import About from '../views/About.vue'

    const routes = [//配置路由的地址和对应的组件
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component:About
      }
    ]

    const router = createRouter({//创建路由
      history: createWebHistory(process.env.BASE_URL),//配置路由的模式为history模式,可以返回之前浏览的页面
      routes//上面配置的路由规则
    })

    export default router//导出配置的路由
    (5)main.js中使用上面配置的路由:
    main.js:
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'

    createApp(App).use(router).mount('#app')
    (6)App.vue中配置路由跳转的链接:
    App.vue:
    <template>
      <div >
        <router-link to="/">Home</router-link> |   //router-link是路由包中定义的组件,本质上是一个a标签
        <router-link to="/about">About</router-link>
      </div>
      <router-view/>//表示路由的页面内容显示的位置
    </template>

    <style>

    </style>
     
    (7)页面效果
  • 相关阅读:
    delphi7 projectoptions打开出错
    file not found frmaddBdsuo.dcu
    session 不活动是因为未注册 WebSessionActivator,或试图在 IHttpHandler 的构造函数中 访问session
    oracle导出指定的表,并将指定的表追加到其他dmp文件中(不影响dmp中其他的表)
    父类指针转换成子类指针
    为什么会是这样的输出结果
    字符数组
    变量的声明和定义
    const对象默认为文件的局部变量
    输出结果
  • 原文地址:https://www.cnblogs.com/maycpou/p/14766225.html
Copyright © 2011-2022 走看看