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>

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

  • 相关阅读:
    komodo install on ubuntu
    关于scrapbook的导入导出
    hg常用命令小记

    在cygwin使用python
    命运多cuai
    常用shell命令
    360做电视广告了
    ubuntu im安装
    ubuntu下的路径
  • 原文地址:https://www.cnblogs.com/Sky-Ice/p/9293251.html
Copyright © 2011-2022 走看看