vue 路由 vue-router

views文件夹下：

about.vue

<template>
    <div>about</div>
</template>

<script>
</script>

<style>
</style>

 

home.vue

<template>
    <div>home</div>
</template>

<script>
</script>

<style>
</style>

router文件夹下：

index.js

import Vue from "vue"
import VueRouter from "vue-router"
import about from "../views/about.vue"
import home from "../views/home.vue"
Vue.use(VueRouter)
export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:about
            
        },
        {
            path:"/home",
            component:home
        },
        {
            path:"/",
            redirect:"/about"
        }
    ]
})

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router/index.js' 

Vue.use(ElementUI)

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

App.vue:

<template>
  <div id="app">
        <div>
            <router-link to="/about" class="active">about</router-link>
            <router-link to="/home">home</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    <div>
    </div>
  </div>
</template>

<script>
export default {
     data() {
    },
        created:function(){
        this.$alert("111")
        },
  methods: {
  }
}
</script>

<style>
</style>

index.html加个样式：

    .router-link-active {color: red;}

 

路由的登录功能：

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/components/layout/Layout'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'login',
    component: () => import('@/components/login/login')
  },
  {
    path: '/home',
    name: 'home',
    meta: {
      requireAuth: true // 需要登录
    },
    component: Layout,
    children: [
      {
        path: 'enroll',
        name: 'enroll',
        component: () => import('@/components/student/student')
      },
      {
        path: 'scheduled_course',
        name: 'scheduled_course',
        component: () => import('@/components/scheduled_course/scheduled_course')
      }
    ]
  }
]

// 路由配置
const RouterConfig = {
  mode: 'history', // require service support
  scrollBehavior: () => ({
    y: 0
  }),
  routes
}
// export const router = new Router(RouterConfig)
const createRouter = () => new VueRouter(RouterConfig)

// 创建路由实例
const router = createRouter()
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
    console.log('该路由需要登录')
    if (localStorage.bearertoken) { // 判断当前的token是否存在 ； 登录存入的token
      next()
    } else {
      next({
        path: '/',
        query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
    next()
  }
})
// 添加动态路由
// addAsyncRouter()

export default router

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import router from '@/js/router'
export default {
  name: 'App',
  router,
  components: {
  },
  created () {
  },
  data () {
    return {
    }
  },
  methods: {

  }
}

</script>

<style>

</style>

Layout.vue

<template>
  <div>
   <el-row>
      <el-col :span="3">
        <side-bar></side-bar></el-col>
      <el-col :span="21">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sideBar from '../sideBar/sideBar'
export default {
  name: '',
  components: {
    sideBar
  }
}
</script>

<style scoped>

</style>