6.Vue路由(vue-router库）

• vue2中路由的写在项目的src/router/index.js 里

import Vue from 'vue'
import Router from 'vue-router'

import home from '@/components/Home.vue';
import newslist from '@/components/news/newslist.vue'
import newsshow from '@/components/news/newsshow.vue'
import imagelist from '@/components/photo/imagelist.vue'
import imgshow from '@/components/photo/imgshow.vue'
import goodslist from '@/components/goods/goodslist.vue'
import goodsshow from '@/components/goods/goodsshow.vue'
import goodsdesc from '@/components/goods/goodsdesc.vue'
import goodscomment from '@/components/goods/goodscomment.vue'
import shopcar from '@/components/shopcar/shopcar.vue'

Vue.use(Router)

export default new Router({
    linkActiveClass:'mui-active', //将激活的路由添加一个mui-active类名称
routes:[
        {path:'/',redirect:'/Home'},
        {path:'/Home',component:home},
        {path:'/news/newslist',component:newslist},
        {path:'/news/newsshow/:newsid',component:newsshow},
        {path:'/photo/imagelist',component:imagelist},
        {path:'/photo/imageshow/:imgid',component:imgshow},
        {path:'/goods/goodslist',component:goodslist},
        {path:'/goods/goodsshow/:goodsid',component:goodsshow},
        {name:'goodsdesc',path:'/goods/goodsdesc/:goodsid',component:goodsdesc},
        {name:'goodscomment',path:'/goods/goodscomment/:goodsid',component:goodscomment},
        {path:'/shopcar',component:shopcar}             
  
     ]
})

routes就是我们的大核心了，里面包含我们所有的页面配置。
path 很简单，就是我们的访问这个页面的路径
name 给这个页面路径定义一个名字，当在页面进行跳转的时候也可以用名字跳转，要唯一哟
component 组件，就是咱们在最上面引入的 import ...了，当然这个组件的写法还有一种懒加载

Home.vue'页面9宫格，用 代替a标签跳转

                

                    

                    
                            
                                
                            
                            
新闻资讯
                    

                    
                            
                            
图片分享
                    

                     
                            
                            
商品购买
                    

                            
                            
留言反馈
                    

                            
                            
视频专区
                    

                            
                            
联系我们
                    
                
 
        

router带参数跳转

newslist.vue的模版
带参数的 要用v-bind绑定来绑定路由
item.id，在后台数据里面会拿到





newsshow.vue的页面
获取参数 var newsid  = this.$route.params.newsid;
如何ajax求数据