vue学习笔记路由基础

一、前面我们提到过单页面富应用阶段，那就要依靠我们的前端路由

　　vue-router

二、配置安装路由

　　1、当我们在项目中下载好相关的路由插件后（vue-router）我们就可以使用它了

　　2、在router文件夹下的index.js中学相关的路由配置代码　　　

//首先导入路由
import VueRouter from 'vue-router'
import Vue from 'vue'

　　3.这里我们同时还要导入vue，使用vue.use安装插件到当前vue程序

//第一步，通过vue.use安装插件
Vue.use(VueRouter)

　　4、现在创建路由对象，在路由对象中对路由进行相关配置，这里一个path对应一个组件值得一提的是一般路由的path有“/”

　　　　而嵌套路由中不能有‘/’ 嵌套路由在children数组中进行设置，这里的组件都需要import相关的组件

const Home = () =>
    import ('../components/Home.vue')
const User = () =>
    import ('../components/User.vue')
const About = () =>
    import ('../components/About.vue')
const HomeNews = () =>
    import ('../components/HomeNews.vue')
const HomeMessage = () =>
    import ('../components/HomeMessage.vue')

//创建VueRouter对象
const routes = [
    //创建路由组件
    {
        path: '',
        redirect: '/home' //rediret重定向 这里是设置默认情况下的显示页面
    },
    {
        path: '/home',
        component: Home,
        children: [ //路由的嵌套使用
            {
                path: '',
                redirect: 'news'
            },
            {
                path: 'news', //这里不能加/
                component: HomeNews
            },
            {
                path: 'message', //这里不能加/
                component: HomeMessage
            }
        ]
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user/:userId',
        component: User
    }

]

　　5、在配置好path和组件的映射关系后，我们就可以根据上面我们配置的路由创建一个路由了

const router = new VueRouter({
    routes,
    mode: 'history', //默认配置为哈希模式用mode可以指定路由模式
    LinkActiveClass: 'active' //处理活跃时候的类名可以在这里改 还可以通过在div中用active-class单个修改
})

　　6、至于什么是哈希模式和history模式，我将在下一节详细解释

vue学习笔记 路由基础

猜你喜欢

vue学习笔记路由基础