您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
用router插件做类似tab切换效果(router使用)
发布时间：2020-02-23 16:33:08编辑：雪饮阅读（）
安装router插件
命令行中进入项目目录执行命令如：
npm init --yes
npm install vue-router --save
命令注解：
init指令会询问一系列的问题，并将你的配置写成一个package.json文件。如果使用了-f|--force|-y|--yes这些参数，那么会生成一个默认的package.json文件。
--save:
--save 和--save-dev下载标签
他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下.
dependencies是运行时依赖，devDependencies是开发时的依赖。即devDependencies 下列出的模块，是我们开发时用的
实现tab切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
Vue.use(VueRouter);
//用两个组件模拟两个页面
var Login={
template:`<div>我是登录页</div>`
};
var Register={
template:`<div>我是注册页</div>`
};
//创建路由对象，为这两个页面设定路由
var router=new VueRouter({
routes:[
{
path:'/login',
component:Login
},
{
path:'/register',
component:Register
}
]
});
//此时使用router-link标签则会自动运用到路由对象上
//router-view则就相当于tab切换时的中间容器
var App = {
template:`<div class='app'>
<router-link to ='/login'>登录</router-link>
<router-link to ='/register'>注册</router-link>
<router-view></router-view>
</div>`,
};
//挂载路由对象
new Vue({
el: '#app',
router:router,
template: `<App />`,
components:{App}
});
</script>
</body>
</html>
关键字词：vue,router,tab,router-link,router-view,to,npm,--yes,--save
上一篇：location.hash与onhashchange
下一篇：router命名路由