vue(四)路由


                                                      路由

基本使用:
1.  布局
    <router-link to="/home">主页</router-link>

    <router-view></router-view>
2. 路由具体写法
    //组件
    var Home={
        template:'<h3>我是主页</h3>'
    };
    var News={
        template:'<h3>我是新闻</h3>'
    };

    //配置路由
    const routes=[
        {path:'/home', componet:Home},
        {path:'/news', componet:News},
    ];

    //生成路由实例
    const router=new VueRouter({
        routes
    });

    //最后挂到vue上
    new Vue({
        router,
        el:'#box'
    });
3. 重定向
    之前  router.rediect  废弃了
    {path:'*', redirect:'/home'}

 vue(四)路由

 vue(四)路由

给当前点击的router-link添加样式用这个类名

vue(四)路由


                                                       路由嵌套

vue(四)路由

vue(四)路由

vue(四)路由

vue(四)路由

路由实例方法:
    router.push({path:'home'});  //直接添加一个路由,表现切换路由,本质往历史记录里面添加一个
    router.replace({path:'news'}) //替换路由,不会往历史记录里面添加 


                                                      路由传参 

使用模板路径 : 表示参数

{{$route.params}}用来显示参数 

 vue(四)路由

vue(四)路由 


                                       vue-cli配合vue-router 

第一步:首先在package.json中查看有没有安装路由 

没有的话就 cnpm install vue-router --save

vue(四)路由

第二步:生成在src文件夹下生成一个components文件夹用来放组件

第三步:在main.js中导入vue-router 

vue(四)路由 

 第四步:在src目录下创建router.config.js用来配置路由

 vue(四)路由

第五步:布局 

vue(四)路由