配置过程
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、定义路由 (建议复制)
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
/*动态路由
1、路径参数以冒号开头;
2、在对应的页面
this.$route.params获取动态路由的值*/
{ 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 、根组件的模板里面放上这句话
6、路由跳转
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
配置文件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: