Vue路由及默认路由的跳转

https://router.vuejs.org/

vue路由配置：
    1.安装 
    npm install vue-router  --save   / cnpm install vue-router  --save
    
                2、引入并 Vue.use(VueRouter)   (main.js)
 
        import VueRouter from 'vue-router'

        Vue.use(VueRouter)
    
    3、配置路由
        
        1、创建组件 引入组件

        2、定义路由  （建议复制s）

            const routes = [
              { path: '/foo', component: Foo },
              { path: '/bar', component: Bar },
              { path: '*', redirect: '/home' }   /*默认跳转路由*/
            ]

        3、实例化VueRouter

            const router = new VueRouter({
              routes // （缩写）相当于 routes: routes
            })

        4、挂载                
        new Vue({
          el: '#app',
          router，
          render: h => h(App)
        })
        
        5 、根组件的模板里面放上这句话            

        6、路由跳转
        Go to Foo
         Go to Bar

代码实现如下

src/components/Home.vue





src/components/News.vue





App.vue





main.js


import Vue from 'vue';
import App from './App.vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5  放在 App.vue

Vue动态路由get传参

src/components/Content.vue



    
    
    
       我是首页组件
        

            

                {{key}}--{{item}}
            
        
    




src/components/News.vue





src/components/Pcontent.vue




App.vue






main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },   /*动态路由*/
  { path: '/pcontent', component: Pcontent },
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5  放在 App.vue

vue路由结合请求数据 实现新闻列表 新闻详情数据渲染

代码如下

  src/components/Content.vue





Home.vue





src/component/News.vue





App.vue





main.js

import Vue from 'vue';
import App from './App.vue';
//引入公共的scss   注意：创建项目的时候必须用scss
import './assets/css/basic.scss';   
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },   /*动态路由*/
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5  放在 App.vue

vue路由编程式的导航 以及vue路由HIstory模式 hash模式

import Vue from 'vue';
import App from './App.vue';
//引入公共的scss   注意：创建项目的时候必须用scss
import './assets/css/basic.scss';   
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News,name:'news' },
  { path: '/content/:aid', component: Content },   /*动态路由*/
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  mode: 'history',   /*hash模式改为history*/
  routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5  放在 App.vue

Vue中路由的嵌套

component组件





















component/user/UserAdd.vue




component/user/UserList.vue




App.vue







import Vue from 'vue';
import App from './App.vue';

//引入公共的scss   注意：创建项目的时候必须用scss
import './assets/css/basic.scss';   
/*路由的嵌套
  1.配置路由
   {
      path: '/user',
      component: User,
      children:[
        { path: 'useradd', component: UserAdd },

        { path: 'userlist', component: Userlist }

      ]

    }

  2.父路由里面配置子路由显示的地方   
*/
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);

import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import User from './components/User.vue';
  import UserAdd from './components/User/UserAdd.vue';
  import Userlist from './components/User/Userlist.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News,name:'news' },
  {       
    path: '/user',  
    component: User,
    children:[
      { path: 'useradd', component: UserAdd },
      { path: 'userlist', component: Userlist }
    ]
  },
  { path: '/content/:aid', component: Content },   /*动态路由*/
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  mode: 'history',   /*hash模式改为history*/
  routes // （缩写）相当于 routes: routes
})

//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5  放在 App.vue