vue2中路由使用教程

2019-01-19 17:54:20  卢浮宫  阅读量:1873  版权声明:本文为站长原创文章,转载请写明出处


一、承接上回,由于前后端分离开发,自然就会有路由需要是使用,于是乎在被坑了一天后就有了这篇文章。

二、操作如下

         ① 安装    npm install vue-router

       

         ②引入    main.js中引入  

        import Vue from "vue"
        import App from "./../src/views/App"
        import Router from "./router"
        import axios from "axios"
        import iView from "iview"
        import "iview/dist/styles/iview.css"
        import "babel-polyfill"
        
        Vue.use(iView);
        Vue.use(Router)
        Vue.config.productionTip = false
        Vue.prototype.$axios = axios

        new Vue({
            el: "#app",
            router:Router,
            components: { App },
            template: "<App/>"
        })

       

         ③router下的index.js中配置如下               

        import Vue from "vue"
        import Router from "vue-router"
        import HelloWorld from "@/components/HelloWorld"
        import Right from "@/components/right/Right"
        import ArticleDetail from "../views/articleDetail/ArticleDetail"
        import Index from "../views/index/Index"

        Vue.use(Router)

        export default new Router({
            routes: [
             {
                path:"/ArticleDetail",
                name:"ArticleDetail",
                component:ArticleDetail
             },
            {
                path:"/Index",
                name:"Index",
                component:Index
            }
         ]
        })
       

          ④挂接router-view(可以理解为定义一个组件,后续的路由操作就渲染在这里了)--直接在App.vue中写入下面内容

        <!-- 挂接路由 -->
        <router-view></router-view>
      

          ⑤路由操作

            

        that.$router.push({
            path: "/ArticleDetail",
            query: {
                articleId: vId
            }
        });

最新评论: