Vue.js框架--路由（十六）

 

主要操作技能：

官网
https://router.vuejs.org/

中文网
https://router.vuejs.org/zh/guide/

vue路由配置：
  1.安装
   cnpm install vue-router --save /npm install vue-router --save
   
  2.引入并Vue.use(VueRouter) (在main.js写)
    import VueRouter from 'vue-router'
      Vue.use(VueRouter);
  
  3.配置路由
    (1)创建组件，引入组件
      import Home from './components/Home.vue' //1.引入组件
      import News from './components/News.vue' //1.引入组件
    
    (2)定义路由
    const routes = [{
            path: '/home',
            component: Home
        },
        {
            path: '/news',
            component: News
        }
     ]
     
    (3)实例化VueRouter
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })
    
    (4)挂载
        new Vue({
            el: '#app',
            router,
            render: h => h(App)
        })
        
   (5)将放在根组件的模板App.vue中

 

编写代码：

Home.vue

News.vue

main.js

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'

//0.引入vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
Vue.use(VueResource);

//1.创建组件
import Home from './components/Home.vue' //1.引入组件
import News from './components/News.vue' //1.引入组件

//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)
})

App.vue

 

  main.js文件配置路由

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'

//0.引入vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
Vue.use(VueResource);

//1.创建组件
import Home from './components/Home.vue' //1.引入组件
import News from './components/News.vue' //1.引入组件
import Detail from './components/Detail.vue' //添加详情路由
import Product from './components/Product.vue' //添加商品路由

//2.配置路由
const routes = [{
		path: '/home',
		component: Home
	},
	{
		path: '/news',
		component: News
	},
	{
		path: '/detail/:aid',    //动态路由
		component: Detail
	},
	{
		path: '/product',    //动态路由
		component: Product
	},
	{   //默认跳转路由
		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 

 

 

 

 

效果:

单击首页

 

单击新闻

r

 

默认跳转路由: