vue-route 配置实例干货版

vue route 指vue的路由功能 适用于设置锚点，或单页程序切换页面。配置简单使用方便。

1.配置routers.js文件 该文件用于配置路由。

//引用组件
import header from './pages/common/header';
import container from './pages/common/container';
import buttom from './pages/common/buttom';
import index from './pages/index';
import slider from './pages/common/slider';
//配置路由
const routers = [{
        //根路由
        path: '/',
        name: '/',
        //单组件渲染 此处是component 多组件是component  注意s的区别
        components: {
            viewheader: header,
            viewbuttom: buttom
        }
    },
    {
        //该路径匹配 /about/[任意字符]     locallhost:8888/#/about/asfaf
        path: '/about/:id',
        name: 'about',
        //组件
        components: {
            viewheader: header,
            viewcontainer: container,
            viewbuttom: buttom
        },
        //子路由  匹配 /about/[任意字符] /child
        children: [{
            path: "child",
            name: 'child',
            //如果要在子路由中渲染组件 必须指定在引用改组件的上层路由vue文件中的view  要主注意啊 哈哈哈
            components: {
                viewcontainer: slider
            }
        }]
    }
];
export default routers;

2.配置main.js （程序主文件）

//引入router组件
import VueRouter from 'vue-router';
//引入自定义routers.js
import routes from './routers';

Vue.use(VueRouter);
//关联自定义路由到vue-router组件中
const router = new VueRouter({
    // mode: 'history',
    // base: __dirname,
    routes
});

//将路由关联到主程序中
new Vue({
    el: '#app',
    router,
    render: h => h(app)
});

//目标template 中加入
//viewcontainer 是容器名字  router-view是显示容器
<router-view name="viewcontainer"></router-view>

以上路由就设置好了 访问指定的地址 或设置vlink 即可测试结果