Vue 中的Vue Router一級路由，二級路由，三級路由以及跳轉

今天編寫了一下Vue中的路由

先用命令行新建一個空的項目，並且我知道要用路由，就下載了路由的相關依賴

vue init webpack demo5

完畢之后進入所在的項目 cd demo5

之后用vscode打開、引入demo5的文件夾，在vscode自帶的命令行中安裝依賴和啟動

cnpm install

cnpm run dev

之后成功啟動在8080端口

 

要想顯示導航，限准備一些vue的頁面，導航，我這邊希望顯示在頭部

那就在header中添加

先來看一下頁面，之后代碼同步到github上  https://github.com/JasmineQian/Vue_Sample

 

先說一下跳轉的用法

 

  methods: {
    goToLearnPage() {
      //跳轉到上一次的頁面
      //this.$router.go(-1)

      //指定跳轉的地址
      //this.$router.replace('/learn')

      //指定跳轉路由的名字下
      //this.$router.replace({name:'menuLink'})

      //通過push進行跳轉
      this.$router.push("/learn");
      //this.$router.push({name:'/learn'})
    }
  }

 

　　

 

 

頁面如下：

關於我們頁面下有二級路由

捐贈方式下添加了三級路由

路由的配置

 

先說一下路由的作用：

 

vue-router 的基本作用就是將每個路徑映射到對應的組件，並通過修改路由進行組件間的切換。

常規路徑規則為在當前 url 路徑后面加上 #!/path， path 即為設定的前端路由路徑。

 

 

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Admin from '@/components/Admin'
import Login from '@/components/Login'
import Menu from '@/components/Menu'
import Register from '@/components/Register'
import About from '@/components/about/About'

//二級路由
import News from '@/components/about/News'
import Contact from '@/components/about/Contact'
import Donate from '@/components/about/Donate'
import Guide from '@/components/about/Guide'

//333級路由
import WechatDonate from '@/components/about/donate/WechatDonate'
import AlipayDonate from '@/components/about/donate/AlipayDonate'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/',component: Home},
    {path: '/menu',component: Menu},
    {path: '/admin',component: Admin},
    {path: '/about',component: About ,children :[
      {path: '/about/news',component: News},
      {path: '/about/contact',component: Contact},
      {path: '/about/donate',component: Donate,children:[
        {path: '/about/donate/wechat',component: WechatDonate},
         {path: '/about/donate/alipay',component: AlipayDonate},
         {path: '/about/donate*', redirect:'/about/donate/alipay'}
      ]},
      {path: '/about/guide',component: Guide},
      {path:'/about*',redirect:'/about/news'}
    ]
    },
    {path: '/login',component: Login},
    {path: '/register',component: Register},
    {path: '*',redirect: '/'}

  ]
})

　　

路由中添加默認，用redirect重定向

router-link 指定跳轉

router-view 顯示

 

比如About中的

<template>
    <div>
        <div class="row mb-5">
            <div class="col-4">
                 <!--導航---- ad浩豐科技奧德賽-->
                <div calss="list-group mb-5">
                    <router-link tag="li" class="nav-link" to="/about/news">
                        <a class="list-group-item list-group-item-action">最新新聞</a>
                    </router-link>
                     <router-link tag="li" class="nav-link" to="/about/contact">
                        <a class="list-group-item list-group-item-action">聯系方式</a>
                    </router-link>
                     <router-link tag="li" class="nav-link" to="/about/guide">
                        <a class="list-group-item list-group-item-action">文檔指導</a>
                    </router-link>
                    <router-link tag="li" class="nav-link" to="/about/donate">
                        <a class="list-group-item list-group-item-action">捐贈方式</a>
                    </router-link>
                </div>
        </div>
                <div class="col-8">
                    <!--導航對應的內容-->
                    <router-view></router-view>
                </div>
        </div>
           
    </div>
</template>

<script>
import News from '@/components/about/News'
import Contact from '@/components/about/Contact'
import Guide from '@/components/about/Guide'

export default {
    components:{
    News,Contact,Guide
  }
}
</script>