zoukankan      html  css  js  c++  java
  • vue-router 路由配置

    前提:

    项目由 vue-cli 脚手架创建。

    首先,先下载 vue-router   

    npm install vue-router

    安装完成后,运行项目

    npm run dev

    打开 main.js , 引入并使用 vue-router

    import VueRouter from "vue-router"
    Vue.use(VueRouter)

    引入创建好的组件

    import Home from "./components/Home.vue"
    import News from "./components/News.vue"

    配置路由: ({path: '*', redirect: '/home'}  // 此项表示,默认加载)

    const routes = [
      {path: '/home', component: Home},
      {path: '/news', component: News},
      {path: '*', redirect: '/home'}   /*默认跳转路由*/
    ]

    实例化 VueRouter

    const router = new VueRouter({
        routes     // routes : routes 的简写方式
    })

    Vue实例中挂载路由:

    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })

    此时,路由就已经配置好了,接下来,我们需要在 App.vue 中 引入

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

    现在,我们就可以看到 Home 组件内容了,

    再引入, router-link 设置路由导航,to 属性 指定链接

      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻页</router-link>

    此时,一个简单的路由就搭建好了

  • 相关阅读:
    第一个反汇编程序
    边缘网关协议(BGP)
    Servlet 学习小结之doPost()方法和doGet()方法
    extern "C"
    工欲善其事 必先利其器
    我是一个混蛋程序员
    KMP 算法——C
    二分查找——C语言
    大整数加法——C语言
    子字符串查找——C语言
  • 原文地址:https://www.cnblogs.com/Sky-Ice/p/9293251.html
Copyright © 2011-2022 走看看