//import导入 Vue(自己起的名) from 从 vue
import
Vue from
'vue'
//引进路由
import
Vuerouter from
'vue-router'
//使用vuerouter
Vue.use(Vuerouter);
//创建局部组件
const Index={
template:`<div>
<h2>这是首页</h2>
<router-view></router-view>
</div>`,
//监听路由变化 to是去的路径 from是来的路径
watch:{
'$route'
(to,from){
console.log(arguments);
console.log(to);
}
},
/*beforeRouteUpdate(to,from,next){
console.log(arguments);
console.log(next);
}*/
beforeRouteUpdate (to, from, next) {
console.log(arguments);
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
next()
},
};
const New={
template:`<div>
<h2>这是新闻</h2>
<router-view></router-view>
</div>`
};
const Zixun={
template:`<div>
<h2>这是资讯</h2>
<router-view></router-view>
</div>`,
//在调用时候没有访问到实例，但可以通过next对其访问
beforeRouteEnter (to, from, next) {
console.log(arguments);
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
next(vm=>{
console.log(vm);
})
},
beforeRouteLeave (to, from, next) {
console.log(arguments);
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
next()
}
};
const Hello={
template:`<h2>这是小首页</h2>`
};
const Xnew={
template:`<h2>这是小新闻</h2>`
};
//实例路由
const router=
new
Vuerouter({
mode:
"history"
,
//mode模式 history h5里面的方法 hash
base:__dirname,
// base 文件路径 相对路径 filename 绝对路径
routes:[
//路由配置
{path:
"/index"
,
/*redirect:"/new",*/
alias:
'/b'
, component:Index,
//redirect为重定向命名
//alias为别名 『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？
///a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
children:[
//动态路由路径以冒号开头
{path:
"/index/hello/:id"
,component:Hello},
{path:
"/index/hello/:id"
,component:Hello}
]
},
//关联路由
{path:
"/new"
,component:New,name:
'new'
,
children:[
//二级路由
{path:
"/new/xnew"
,component:Xnew },
]
},
{path:
"/zixun"
,component:Zixun},
]
});
//路由钩子
/*router.beforeEach((to, from, next) => { //全局的前置守卫
console.log(arguments);
//sessionStorage.setItem('user','')
//sessionStorage.getItem('user')
next()
});*/
new
Vue({
el:
"#app"
,
router,
//开启路由
template:
`
<div>
<ul>
<li>
<router-link to=
"/index"
>这是首页</router-link>
<ol>
<li><router-link to=
"/index/hello/123"
>首页1</router-link></li>
<li><router-link to=
"/index/hello/234"
>首页2</router-link></li>
</ol>
</li>
<li>
<router-link to=
"/new"
>这是新闻</router-link>
<ol> <!-- 二级路由的内容-->
<li><router-link to=
"/new/xnew"
>这是小新闻</router-link></li>
</ol>
</li>
<li>
<router-link to=
"/zixun"
>这是资讯</router-link>
</li>
<router-view></router-view>
<ul>{{ $route.params.id }}</ul>
</ul>
</div>
`
});