vue 路由别名 路由跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
</head>
<body>
<div id="hdcms">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<router-link to="/">返回首页</router-link>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP开源免费框架',content:'这是内容....'},
{id:2,title:'HDCMS内容管理系统',content:'这是HDCMS内容....'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
}
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
mounted(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
}
}
let routes = [
{path: '/', component: home},
{path: '/content/:id', component: content,name:'content'},
];
//要把组件交给路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
</body>
</html>
vue 路由别名 路由跳转的更多相关文章
- 每天一点点之vue框架开发 - vue-router路由进阶（路由别名、跳转、默认路由、二级路由、路由守卫）
路由别名 在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...
- 064——VUE中vue-router之使用路由别名定制(alias)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中的路由的跳转的参数
vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中的路由 以及默认路由跳转
https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...
- Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
随机推荐
- 解决 c3p0报错 Establishing SSL connection without server's identity verification is not recommended
_ 报错: Establishing SSL connection without server's identity verification is not recommended. Accordi ...
- keras 入门整理 如何shuffle，如何使用fit_generator 整理合集
keras入门参考网址: 中文文档教你快速建立model keras不同的模块-基本结构的简介-类似xmind整理 Keras的基本使用(1)--创建,编译,训练模型 Keras学习笔记(完结) ke ...
- CSS组合设计输入框和按钮生成自定义关键字查询栏
效果图: html代码: <!DOCTYPE html> <head> <title></title> </head> <body&g ...
- 打印sql
$query=$sql->where([ 'test_id'=>24, 'name'=>'小洋' ]); //打印sql; $query->prepare(Yii::$app- ...
- mysql 唯一索引与null.md
mysql 的唯一索引要求所有参与的列都不能够为 null 值,如果唯一索引中的任何一个元素含有 null 值,则唯一约束将不起作用. 示例代码 create table tb ( a int, b ...
- React-redux深入理解
首先,一张 Redux 解释图镇楼: [回顾]Redux 的核心: store 是什么?(createStore 函数的实现) const store = createStore(reducer); ...
- leetcode 687.Longest Univalue Path
寻找最长的路径,那么会在左边或者右边或者是从左到跟然后再到右方的路径的. /** * Definition for a binary tree node. * struct TreeNode { * ...
- css3实现条纹以及方格斜纹背景
CSS代码: .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 5 ...
- C++实验七
#include <iostream> using namespace ::std; int main() { ios_base::fmtflags original_flags = co ...
- 2019OO第一单元作业总结
OO第一单元作业的主题是求导,下面将分三次作业分别总结一下. --------------------------------------------------------------------- ...