Vue（十六）vue-router路由
一、 vue-router路由
<style>
.active{
font-size:20px;
color:red;
text-decoration: none;
}
</style> <script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script>
window.onload = function(){
//1.定义组件
var Home = {
template:'<h3>我是主页</h3>'
} var News = {
template:'<h3>我是新闻</h3>'
} //2.配置路由
const routes = [
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',redirect:'/home'} //重定向
] //3.创建路由实例
const router = new VueRouter({
mode:'history', //更改模式
routes, //简写，相当于routes:routes
linkActiveClass:'active'
}) //4.创建根实例并将路由挂载到Vue实例上
var vm = new Vue({
el:'#app',
router //注入路由
})
}
</script> </head> <body> <div id="app"> <div>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div> <div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div> </body>
<style>
.active{
font-size:20px;
color:red;
text-decoration: none;
}
</style> <script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script>
window.onload = function(){
//1.定义组件
var Home = {
template:'<h3>我是主页</h3>'
} var User = {
template:'#user'
} var Login={
template:'<h4>用户登陆。。。获取参数：{{$route.query.pwd}}</h4>'
} var Regist={
template:'<h4>用户注册。。。获取参数：{{$route.params}}</h4>'
} const routes = [
{
path:'/home',
component:Home
},
{
path:'/user',
component:User,
children:[
{
path:'login',
component:Login
},
{
path:'regist/:username/:password',
component:Regist,
}
]
},
{
path:'*',
redirect:'/home'
}
] const router = new VueRouter({
routes,
linkActiveClass:'active' //更新活动链接的class类名
}) var vm = new Vue({
el:'#app',
router //注入路由
})
}
</script> </head> <body> <div id="app"> <div>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div> <div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div> </div> <template id="user">
<div>
<h3>用户信息</h3>
<ul>
<router-link to="/user/login?name=Tom&pwd=123" tag="li">用户登录</router-link>
<router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
</ul>
<router-view></router-view>
</div>
</template> </body>
new Vue({
el:'#itany',
router, //注入路由
methods:{
push(){
router.push({path:'home'}); //添加路由，切换路由
},
replace(){
router.replace({path:'user'}); //替换路由，没有历史记录
}
}
});
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<router-view></router-view>
</transition>
</div>
Vue（十六）vue-router路由的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- hbuilderX创建vue项目之添加router路由（前端萌新）
作为一个刚刚接触前端不久的新人来说,熟悉了一种目录结构或者项目创建方法以后,恨不得一辈子不会变! 可是人要生活,就要工作,既然是打工,当然要满足雇佣者的要求. 今天我来说说 hbuilderX 这个开 ...
- Vue(基础六)_嵌套路由（续）
一.前言 1.路由嵌套里面的公共路由 2.keep-alive路由缓存 3.导航守卫 二.主要内容 ...
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)
前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
随机推荐
- 一起学Hive——创建内部表、外部表、分区表和分桶表及导入数据
Hive本身并不存储数据,而是将数据存储在Hadoop的HDFS中,表名对应HDFS中的目录/文件.根据数据的不同存储方式,将Hive表分为外部表.内部表.分区表和分桶表四种数据模型.每种数据模型各有 ...
- arcgis 10 File GDB转成9.3 File GDB
背景:已有的File GDB数据是在ArcGIS 10下面创建的,在运行9.3的电脑上无法读取,需要转换成低版本. 方法: 1.在ArcGIS Toolbox中找到相关工具(datamanagemen ...
- window与linux文件共享解决方案
我的系统是windows7 x64,虚拟机上的linux系统是centos6.5 方法一: 1.在win7系统上建立一个用户 2.在f盘建立一个文件夹linuxshare,然后右击-属性-共享-高级共 ...
- Flink的流处理--KeyBy
逻辑上将一个流分成不相交的分区,每个分区包含相同键的元素.在内部,这是通过散列分区来实现的 object Keyby { def main(args: Array[String]): Unit = { ...
- CentOS系统找不到setup命令工具的解决方法
如果你的CentOS系统中没有setup命令,很有可能是因为你安装CentOS系统时采用了最小化安装(minimal).这时,你执行setup命令时,就会报错: 错误信息: 1[root@localh ...
- Radar Installation POJ - 1328（贪心）
Assume the coasting is an infinite straight line. Land is in one side of coasting, sea in the other. ...
- 正确实现用spring扫描自定义的annotation
背景在使用spring时,有时候有会有一些自定义annotation的需求,比如一些Listener的回调函数. 比如: @Service public class MyService { @MyLi ...
- hadoop安装过程中出现的错误
此次来记录一下我在安装Hadoop安装过程中出现的错误,安装过程参照慕课网林子雨教程进行安装,在尝试过程中出现的错误如下: 1.在安装Ubuntu时,新建虚拟电脑时,并没有在版本的输入框中有Ubunt ...
- BZOJ.4513.[SDOI2016]储能表(数位DP)
BZOJ 洛谷 切了一道简单的数位DP,终于有些没白做题的感觉了...(然而mjt更强没做过这类的题也切了orz) 看部分分,如果\(k=0\),就是求\(\sum_{i=0}^n\sum_{j=0} ...
- Linux服务部署--Java（一）
网络配置 一.配置dns 1.修改/etc/NetworkManager/NetworkManager.conf 文件,在main部分添加 “dns=none” 选项: 2.NetworkManage ...