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'}
给当前点击的router-link添加样式用这个类名
路由嵌套
路由实例方法:
router.push({path:'home'}); //直接添加一个路由,表现切换路由,本质往历史记录里面添加一个
router.replace({path:'news'}) //替换路由,不会往历史记录里面添加
路由传参
使用模板路径 : 表示参数
{{$route.params}}用来显示参数
vue-cli配合vue-router
第一步:首先在package.json中查看有没有安装路由
没有的话就 cnpm install vue-router --save
第二步:生成在src文件夹下生成一个components文件夹用来放组件
第三步:在main.js中导入vue-router
第四步:在src目录下创建router.config.js用来配置路由
第五步:布局