vue.js 知识点（二）

关于vue看到有很多的知识点和react有很多相近的地方，比如说路由还有一些简单的运用，但是又有一些不同，比如格式、还有写法的一些不同！

所以在这里我总结一下关于vue 关于路由的一些运用：

路由：

1、在总页面中设置路由以及参数名，例如

　　{

　　　　path:"/hellopage/:id",

　　　　name:'hellopage',

　　　　component:hellopage

　　}

2、在新页面进行配制文件，

　　这样点击之后就会跳转到新的页面，有两种方式：

　　一：通过路由跳转　　:to="/路径/参数"

　　二：通过点击按钮，触发函数跳转 @click="跳转函数名”

　　<div>

　　　　<router-link :to="{path:'/hellopage/123'}">第一个点击跳转</router-link>

　　　　<router-link :to="{path:'/hellopage/789“ query:{userid:9855,username:'liumcb‘}}>第一个点击跳转</router-link>

　　　　<button @click="clickhandle">这是点击跳转按钮</button>

　　</div>

　　如果是路由跳转，不需要在这个页面有什么额外操作了，若是函数跳转，则需要添加新的一些methods方法

　　methods:{

　　　　clickpage:function(){

　　　　this.$router.path({path:"/hellopage/224",query:{userid:566,name:"liumcb2"}})

　　}

3、在新的页面接受参数

　　export default {

　　name:"hellopage",

　　data(){

　　　　return (){

　　　　//设置接受参数的参数名

　　　　id:this.$route.params.id.　　　　//接受参数,这个参数就是第一个页面中，配制的参数

　　　　userid:this.$route.query.userid,　　　　//这个参数是从路由中接收到的设置的query参数

　　　　username:this.$route.query.name

　　　　}

　　在新的页面中使用这些参数

　　<div>

　　　　<p>接受的参数id:<span>{{{id}}</span></p>

　　　　<p>接受的参数userid：<span>{{userid}}</span></p>

　　　　<p>接受的参数username:<span>{{username}}</span></p>

　　</div>

总结起来这就是路由的一些用法了，看起来跟react十分相似；

1、其中router-link 中可以添加query={id:'123‘} query的作用是给链接后面拼接内容。

　　例如，原来是 newpage/123?id=123　

　　所以，当为链接添加更多参数的时候，可以使用query参数进行拼接url

2、给页面添加子页面的时候，在需要添加子页面的地方添加

　　<router-view></router-view>

　　并且在router路由的页面引用子页面，并且添加新子页面的路由：

　　{

　　　　path: '/newpage/:id',

　　　　name: 'newpage',

　　　　component: newpage,

　　　　children:[

　　　　　　{path:'info/:id',component:info},

　　　　　　{path:'content/:id',component:content},

　　　　]

　　}

巴特西

vue.js 知识点（二）

最新文章

热门文章