import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//创建一个路由对象，当导入vue-router包之后，在window 全局对象中就有了一个路由构造函数 vueRouter
// 在new一个路由对象的时候，可以为构造函数，传递一个配置对象
var login = {
	template:'#login'
}
var register = {
	template:'#register'
}

var routerObj = new VueRouter({
	routes:[
	// 每个路由规则，都是一个对象，这个规则对象身上有两个必须的属性
	// 1. path: 表示坚挺的路由链接地址
	// 2. component 表示如果匹配则展示对应组件(必须是组件模板对象而不是组件名称)
		{path:'/login',component:login},
		{path:'/register',component:register},
	] //表示路由匹配规则
})
var vm = new Vue({
	el:'#app',
	data:{
		route_path: ''
	},
	methods:{
	},
	created(){
		this.route_path = this.$route.path
	},
	components:{
		login,
		register
	},
	// 将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
	router:routerObj
})

var routerObj = new VueRouter({
	routes:[
	//表示路由匹配规则
	// 重定向 / 的 url地址 利用redirect 不属于Node里的redirect
	// 目的：手动修改哈希值
		{path:'/',redirect:'/login'}
		{path:'/login',component:login},
		{path:'/register',component:register},
	] 
})

var routerObj = new VueRouter({
	routes:[
	//表示路由匹配规则
	// 重定向 / 的 url地址 利用redirect 不属于Node里的redirect
	// 目的：手动修改哈希值
		{path:'/',redirect:'/login'}
		{path:'/login',component:login},
		{path:'/register',component:register},
	],
	linkActiveClass:'myactive'
})

var login = {
	template:'<h1>登录---ID：{{$route.query.id}}---用户：{{$route.query.name}}</h1>',
	created(){
		console.log(this.$route)
	}
}
var register = {
	template:'<h1>注册</h1>'
}
var router = new VueRouter({
	routes:[
		{path:'/',redirect: '/login'},
		{path:'/login',component: login},
		{path:'/register',component: register}
	]
})
var vm = new Vue({
	el:'#app',
	data:{

	},
	methods:{},
	router:router
})

var account = {
	template:'#temp1'
}
var login = {
	template:'<h4>登录</h4>'
}
var register = {
	template:'<h4>注册</h4>'
}
var router = new VueRouter({
	routes:[
		{	
			path:'/account',
			component:account,
			children:[
				{path:'login',component:login},
				{path:'register',component:register}	
			]
		}
		// {path:'/account/login',component:login},
		// {path:'/account/register',component:register}
	]
})	
var vm = new Vue({
	el:'#app',
	data:{},
	methods:{},
	router:router
})

var header = {
	template:'#header'
}
var leftBox = {
	template:'#leftBox'
}
var MainBox = {
	template:'#MainBox'
}
var router = new VueRouter({
	routes:[
		// {path:'/',component: header},
		// {path:'/left',component: header},
		// {path:'/main',component: header},
		{
			path:'/',
			components:{
				'default': header,
				'left': leftBox,
				'main': MainBox
			}
		}
	]
})
var vm = new Vue({
	el:'#app',
	data:{
	},
	methods:{},
	router:router
})

var vm = new Vue({
	el:'#app',
	data:{
		firstname:'',
		lastname:'',
		fullname:''
	},
	methods:{
		getFullName:function(){
			this.fullname = this.firstname+'-'+ this.lastname
		}
	},
})

var vm = new Vue({
	el:'#app',
	data:{
		firstname:'',
		lastname:'',
		fullname:''
	},
	methods:{
	},
	watch:{
		// 使用这个属性，可以监视watch data事件的变化，然后触发方法
		'firstname':function(newVal,oldValue){
			// this.fullname = this.firstname + '-' + this.lastname
			this.fullname = newVal + '-' + this.lastname
		},
		'lastname':function(newVal){
			this.fullname = this.firstname + '-' + newVal
		}
	}
})

var vm = new Vue({
	el:'#app',
	data:{
		firstname:'',
		lastname:'',
	},
	methods:{
	},
	computed:{
		// 在computed 中，可以定义一些属性，这些属性叫做【计算属性】
		// 本质是一个方法，计算的时候把名称直接当作属性来使用，并不会当作方法来调用
		// 注意1: 计算属性，在引用的时候，一定不要加{}去调用，直接把他当作普通属性去使用就好了
		// 注意2： 只要计算属性，这个function 内部，所用到的任何data的变化会 【重新计算】
		// 注意3： 计算属性求值结果会缓存，方便下次直接使用，如果计算属性方法中，所有来的任何数据没发生变化，则不会重新对计算求值
		'fullname': function(){
			return this.firstname + '-' + this.lastname
		}
	}
})

const login = {
	template:'<h4>这是登录组件，这个组件是爸爸我开发的</h4>'
}
const register = {
	template:'<h4>这是注册组件，这个组件是某某开发的</h4>'
}
const router = new VueRouter({
	routes:[
		{path:'/',component:login},
		{path:'/login',component: login},
		{path:'/register',component: register}
	]
})
var vm = new Vue({
	el:'#app',
	data:{

	},
	methods:{},
	router:router,
	watch:{
		'$route.path':function(newVal,oldVal){
			// console.log(newVal+'-'+oldVal)
			if (newVal==="/login") {
				alert('欢迎进入登录页面^-^')
			}else if(newVal === '/register'){
				alert('欢迎进入注册页面^-^')
			}
		}
	}
})