路由配置相关问题

1.配置路由地址

在router.js文件中配置路由地址的时候，使用的是vue-router，只要写在home下面的，都可以通用header和footer，如果有页面不想要的话，就要把路由地址放到外面去。

//`router.js`文件中
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({  
    routes: [{      
        path: "/",      
        name: "home",      
        component: () => import('@/pages/homes/homeIndex/index.vue'),      
        redirect: {        
        	name: 'list'      
    	},      
         children: [{          
             path: "/list",          
             name: "list",          
             component: () => import('@/pages/homes/list/index.vue'),        
		},...
        //下面都是按照list的配置进行路由配置

如果需要验证登陆后才可以点击查看页面的话，增加一个判断条件：

{          
    path: "/home",          
    name: "home",          
    meta: {            
          isAuth: true          
    },          
    component: () => import('@/pages/homes/home/index.vue'),        
},

2. `Vue2.0`中$router 和 $route的区别

①.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。$router对象是全局路由的实例，是router构造方法的实例。$router.push({path:'home'});本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录。

路由实例方法：

replace方法 $router.replace({path:'home'});//替换路由，没有历史记录，一般使用replace来做404页面 this.$router.replace('/')。

还有push方法，push方法其实和<router-link :to="...">是等同的。注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

还有go方法，this.$router.go(-1) // 后退

②.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等我们可以从vue devtools中看到每个路由对象的不同。

$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。$route.params 对象，包含路由中的动态片段和全匹配片段的键值对。

$route.query 对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == 'yes' 。

$route.router 路由规则所属的路由器（以及其所属的组件）。

$route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。$route.name 当前路径的名字，如果没有使用具名路径，则名字为空。

3.在`router.js`中配置相同页面不同id的地址

在router.js配置地址的时候，想要配置一个不同id显示相同类别的页面，

// 这是正常页面跳转配置
{          
    path: "/Detail",          
    name: "Detail",          
    component: () => import('@/pages/Detail/index.vue'),        
},   
                
//这是带有id传值的配置   
{          
    path: "/Detail/:id",   /*注意这里，加了一个/：id*/         
    name: "Detail",          
    component: () => import('@/pages/Detail/index.vue'),        
},

路由配置相关问题