Vue 路由，重定向，别名

下面是demo

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

//import router from './router/index'

import echarts from 'echarts'

 

import Router from 'vue-router'

Vue.use(Router)

 

import testmargin from '@/components/testmargin'

 

//1.引入组件

import NonePCComp from './components/NonePCComp'

import testecharts from './components/testecharts'

import VueRouter from 'vue-router'

 

//2.配置路由

const routes=[

  {path:'/testmargin',component:testmargin, alias: '/bbbb'},//别名

  {path:'/NonePCComp',component:NonePCComp},

  {path:'/testecharts',component:testecharts},

  {path:'/tttttttt',redirect:'/testmargin'},

  {path:'*',redirect:'/testecharts'}

]

//3.实例化Router

const router=new VueRouter(

  {

    routes

  }

)

 

Vue.prototype.$echarts = echarts

 

Vue.use(ElementUI)

 

Vue.config.productionTip = false

 

Vue.prototype.URL_PREFIX = 'http://localhost:60589' //  在这里给Vue设定全局常量   在vue中通过页面引用  this.URL_PREFIX

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

 

 

 

 

 

 

下面是文档记录

动态向根加载页面

 

需要使用vue-router

 

Main.js 是项目入口

 

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)

 

 

 

 

(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)

})

 

根组件的模板里面放上这句话   <router-view></router-view>         

//5 <router-view></router-view> 放在 App.vue

 

 

 

 

（App.vue）

    <router-link to="/home">首页</router-link>

<router-link to="/news">新闻</router-link>

 

 

 <router-view></router-view>

 

 

 

 

 

 

 

重定向和别名

 

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({

  routes: [

    { path: '/a', redirect: '/b' }

  ]})重定向的目标也可以是一个命名的路由：

const router = new VueRouter({

  routes: [

    { path: '/a', redirect: { name: 'foo' }}

  ]})

 

别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为：

const router = new VueRouter({

  routes: [

    { path: '/a', component: A, alias: '/b' }

  ]})