08-vue-router的使用

主要从路由设置、重定向、路由嵌套、无相关页面、跳转、入参记录一下。

• 下载安装vue-router,根目录执行npm install vue-router--save

• 我的文件目录如下

  
  path.png

• main.js全局使用router

import Vue from 'vue'
import App from './App.vue'
import router from './router'     // router实例配置 
import Router from "vue-router";
Vue.use(Router)   // vue全局使用router

Vue.config.productionTip = false

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

• router/index.js设置

import Router from 'vue-router'
import routes from './routes'   // router路径设置

export default new Router({
  // 默认是hash, history 可以去掉多余的#号
  mode:'history',
  routes
})

• routes.js设置

import Home from "@/components/home"
import Loan from "@/components/loan"
import CrerightsChange from "@/components/loan/crerightsChange"
import MoneyInPlan from "@/components/loan/moneyInPlan"
import BulkStanList from "@/components/loan/bulkStanList"
import CrerightsChangeDetails from "@/components/loan/crerightsChangeDetails"


import Account from "@/components/account"
import BorrowAccount from "@/components/account/borrowAccount"
import LoanAccount from "@/components/account/loanAccount"

import CompanyInfo from "@/components/companyInfo"

import Page404 from '@/components/notFound'
import '@/assets/css/global.css'

export default [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path:'/loan',
        name:'loan',
        // 重定向
        redirect:'/loan/moneyInPlan',
        component:Loan,
        // 嵌套路由用children 来定义
        children:[
            {
                path:'/loan/moneyInPlan',
                name:'moneyInPlan',
                component:MoneyInPlan
            },
            {
                path:'/loan/bulkStanList',
                name:'bulkStanList',
                component:BulkStanList
            },
            {
                path:'/loan/crerightsChange',
                name:'crerightsChange',
                component:CrerightsChange
            },
            { path:'/loan/crerightsChangeDetails',
                name:'crerightsChangeDetails',
                component:CrerightsChangeDetails
            }
        ]
    },
    {
        path:'/account',
        name:'Account',
        redirect:'/account/borrowMoney',
        component:Account,
        children:[
            {
                path:'/account/borrowAccount',
                name:'borrowAccount',
                component:BorrowAccount
            },
            {
                path:'/account/loanAccount',
                name:'loanAccount',
                component:LoanAccount
            }
        ]

    },
    {
        path:'/companyInfo',
        name:'companyInfo',
        component:CompanyInfo
    },
    // 无对应地址时的跳转
    {
        path: '*',
        component: Page404
    }

]

• 路由跳转和入参
  • router-link标签指定,
    • 用query或者params来指定带的参数，区别在于跳转时候params会以形如?id=XXX的形式出现，query不会出现在地址栏，注意参数里面不能为变量，如果需要变量，请用方法的形式来返回。

     <router-link  :to="{name:'crerightsChangeDetails',query:{id:12}}">立即抢购</router-link>
    

  • js方法指定
    • 字符串形式:表示在routes指定的path: this.$router.push('/')
    • 对象形式：this.$router.push({ path: '/' })
    • 命名路由的形式，在routes定义的name:this.$router.push({ name: 'crerightsChangeDetails', params: { id: 666 }})
• 访问路由参数
  • 在页面访问：路由的name:<p>{{$route.name}}</p>
  • 在vue实例上访问

        methods:{
         // 跳到下一页
          goNext(){
              this.$router.go(1);
          },
          // 跳到上一页
          goPrev(){
            this.$router.go(-1);
          },
          goSomeUrl(){
            this.$router.push('/');
          }
        },
        // 进入路由前
        beforeRouteEnter(to,from,next){
            //当前的页面
            console.log(to);
            // from 从哪个页面进来的
            console.log(from);
            // false 会阻止进入此路由，为空或true为正常进入此路由,
            // 这个不管阻止还是正常进入 必须指定 否则无法正常
            next();
        },
        // 退出路由前
        beforeRouteLeave(to,from,next){
            console.log(to);
            console.log(from);
            next();
        },
        // 更新路由前
        beforeRouteUpdate(to,from,next){
            console.log(to);
            console.log(from);
            next();
        }